首页 > > 网页制作 > css >

阿超的烦恼 javaScript篇

2018-06-24 02:17:19来源：未知阅读 ()

幼儿园级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>