阿超的烦恼 javaScript篇

幼儿园级1-100随机数运算

实现目标

1.点击随机生成两个数并进项随机的四则运算。

2.答案暂时隐藏，等孩子做完题后点击答案处显示答案。

3.背景设置的卡通些，激发孩子阅读兴趣...........T T。

一、截图展示（此展示位HTML页面）

I 开始：

II 生成随机数运算：

III 显示结果：

二、代码部分

 <!DOCTYPE html>
 <html>
 <head>
     <title>demo</title>
     <style type="text/css">
         .wapper{
             width: 560px;
             height: 150px;
             border: 1px solid green;
             position: absolute;
             top: 100px;
             left: 200px;
             background: url(back.jpg);
         }
         .wapper li{
             padding: 0;
             margin: 0;
             list-style-type: none;
             height: 100px;
             width: 100px;
             border: 1px solid pink;
             float: left;
             font-size: 50px;
             color: blue;
             text-align: center;
             line-height: 100px;
         }
         .button{
             width: 80px;
             height: 40px;
             background-color: green;
             position: absolute;
             top: 180px;
             left: 625px;
             cursor: pointer;
         }
         .result{
             width: 200px;
             height: 150px;
             border: 1px solid green;
             position: absolute;
             top: 100px;
             left: 820px;
             background: url(back.jpg) repeat -70px 0px;
             text-align: center;
             line-height: 150px;
             font-size:50px;
             color: pink;
             cursor: pointer;
         }
     </style>
 </head>
 <body>
     <div class = "wapper">
         <ul>
             <li class="first">请</li>
             <li class="symbol">点</li>
             <li class="second">击</li>
         </ul>
     </div>
         <button class="button" onclick="randomDemo()">Next</button>
     <div class="result" onclick="show()">点答案</div>
     <script type="text/javascript">
         var first = document.getElementsByClassName("first")[0];
         var symbol = document.getElementsByClassName("symbol")[0];
         var second = document.getElementsByClassName("second")[0];
         var ret = 0;
         var resDiv = document.getElementsByClassName("result")[0];
         randomDemo = function(){
             var sym = ["+","-","*","/"];
             var fir = Math.floor(Math.random()*100);
             var sec = Math.floor(Math.random()*100);
             var i = Math.floor(Math.random()*4);
             first.innerHTML = fir;
             symbol.innerHTML = sym[i];
             second.innerHTML = sec;

             switch(i){
                 case 0: ret = fir + sec;break;
                 case 1: ret = fir - sec;break;
                 case 2: ret = fir * sec;break;
                 case 3: ret = fir / sec;break;
             }
             ret = Math.floor(ret);
             resDiv.innerHTML = "点答案";
         }
         show = function(){
             resDiv.innerHTML = ret;
         }

     </script>
 </body>
 </html>