免费音频下载网址——站长工具
效果图:
上代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<meta charset="utf-8">
<title>口算天天练</title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
}
#nav{
font-size: 90px;
text-align: center;
}
#buttons button{
width: 32%;
height: 32vw;
font-size: 50px;
text-align: center;
}
.p1{
color: red;
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<p class="p1">口算天天练</p>
<audio id='aa'><!-- 2.wav正确提示音 -->
<source src="2.wav" type="audio/mpeg">
</audio>
<audio id='bb'><!-- 3.wav错误提示音 -->
<source src="3.wav" type="audio/mpeg">
</audio>
<div id="nav"></div>
<script type="text/javascript">
var a,b;
function hehe(){
a=1+Math.floor(Math.random()*9);
b=Math.floor(Math.random()*(11-a));
// i.innerHTML=a+"+"+b+"=??";
i.innerHTML=a+"+"+b+"=?";
}
var i=document.getElementById("nav");
var c = document.getElementById("aa");
var d = document.getElementById("bb");
hehe();
function check_add(s){
if((a+b)== s){
c.play();
rush();
}else{
d.play();
}
}
function rush(){
a=1+Math.floor(Math.random()*9);
b=Math.floor(Math.random()*(11-a));
// i.innerHTML=a+"+"+b+"=??";
i.innerHTML=a+"+"+b+"=?";
function check_add(s){
if((a+b)== s){
c.play();
hehe();
}else{
d.play();
}
}
}
</script>
<div id="buttons">
<button onm ousedown="check_add(1)" >1</button>
<button onm ousedown="check_add(2)" >2</button>
<button onm ousedown="check_add(3)" >3</button>
<button onm ousedown="check_add(4)" >4</button>
<button onm ousedown="check_add(5)" >5</button>
<button onm ousedown="check_add(6)" >6</button>
<button onm ousedown="check_add(7)" >7</button>
<button onm ousedown="check_add(8)" >8</button>
<button onm ousedown="check_add(9)" >9</button>
<button onm ousedown="check_add(10)" >10</button>
</div>
</body>
</html>