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