幼兒園級1-100隨機數運算 實現目標 1.點擊隨機生成兩個數併進項隨機的四則運算。 2.答案暫時隱藏，等孩子做完題後點擊答案處顯示答案。 3.背景設置的卡通些，激發孩子閱讀興趣...........T T。 一、截圖展示（此展示位HTML頁面） I 開始： II 生成隨機數運算： III 顯示結果 ...
幼兒園級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>
