幼儿园级1-100随机数运算
实现目标
1.点击随机生成两个数并进项随机的四则运算。
2.答案暂时隐藏，等孩子做完题后点击答案处显示答案。
3.背景设置的卡通些，激发孩子阅读兴趣...........T T。
一、截图展示（此展示位HTML页面）
I 开始：
II 生成随机数运算：
III 显示结果：
二、代码部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>demo</title> 5 <style type="text/css"> 6 .wapper{ 7 width: 560px; 8 height: 150px; 9 border: 1px solid green; 10 position: absolute; 11 top: 100px; 12 left: 200px; 13 background: url(back.jpg); 14 } 15 .wapper li{ 16 padding: 0; 17 margin: 0; 18 list-style-type: none; 19 height: 100px; 20 width: 100px; 21 border: 1px solid pink; 22 float: left; 23 font-size: 50px; 24 color: blue; 25 text-align: center; 26 line-height: 100px; 27 } 28 .button{ 29 width: 80px; 30 height: 40px; 31 background-color: green; 32 position: absolute; 33 top: 180px; 34 left: 625px; 35 cursor: pointer; 36 } 37 .result{ 38 width: 200px; 39 height: 150px; 40 border: 1px solid green; 41 position: absolute; 42 top: 100px; 43 left: 820px; 44 background: url(back.jpg) repeat -70px 0px; 45 text-align: center; 46 line-height: 150px; 47 font-size:50px; 48 color: pink; 49 cursor: pointer; 50 } 51 </style> 52 </head> 53 <body> 54 <div class = "wapper"> 55 <ul> 56 <li class="first">请</li> 57 <li class="symbol">点</li> 58 <li class="second">击</li> 59 </ul> 60 </div> 61 <button class="button" onclick="randomDemo()">Next</button> 62 <div class="result" onclick="show()">点答案</div> 63 <script type="text/javascript"> 64 var first = document.getElementsByClassName("first")[0]; 65 var symbol = document.getElementsByClassName("symbol")[0]; 66 var second = document.getElementsByClassName("second")[0]; 67 var ret = 0; 68 var resDiv = document.getElementsByClassName("result")[0]; 69 randomDemo = function(){ 70 var sym = ["+","-","*","/"]; 71 var fir = Math.floor(Math.random()*100); 72 var sec = Math.floor(Math.random()*100); 73 var i = Math.floor(Math.random()*4); 74 first.innerHTML = fir; 75 symbol.innerHTML = sym[i]; 76 second.innerHTML = sec; 77 78 switch(i){ 79 case 0: ret = fir + sec;break; 80 case 1: ret = fir - sec;break; 81 case 2: ret = fir * sec;break; 82 case 3: ret = fir / sec;break; 83 } 84 ret = Math.floor(ret); 85 resDiv.innerHTML = "点答案"; 86 } 87 show = function(){ 88 resDiv.innerHTML = ret; 89 } 90 91 </script> 92 </body> 93 </html>
