用JS做10以内的加法(带按钮)

WEB一次作业,用JS做个10以内的加法 回答正确,播放正确提示音 回答错误,播放错误提示音 当回答正确后,自动刷新页面,出现新题目! 回答错误,继续回答!

免费音频下载网址——站长工具


效果图:

用JS做10以内的加法(带按钮)

上代码:
<!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>

 

上一篇:猜数字游戏


下一篇:关于js中clearInterval()无法在if语句中停止定时器的解决办法