JavaScript幼儿园级1-100随机数运算
程序员文章站
2022-03-13 17:21:12
幼儿园级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>
上一篇： Oracle三层嵌套分页查询示例及rownum原理
下一篇： 迭代器