當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

用JS做10以内的加法（带按钮）

發布時間：2024/3/12 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了用JS做10以内的加法（带按钮）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

WEB一次作業，用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'><source src="2.wav" type="audio/mpeg"></audio><audio id='bb'><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 onmousedown="check_add(1)" >1</button><button onmousedown="check_add(2)" >2</button><button onmousedown="check_add(3)" >3</button><button onmousedown="check_add(4)" >4</button><button onmousedown="check_add(5)" >5</button><button onmousedown="check_add(6)" >6</button><button onmousedown="check_add(7)" >7</button><button onmousedown="check_add(8)" >8</button><button onmousedown="check_add(9)" >9</button><button onmousedown="check_add(10)" >10</button></div></body> </html>