使用原生js，写了一个心算口算天天练
生活随笔
收集整理的這篇文章主要介紹了
使用原生js，写了一个心算口算天天练
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼不基于任何庫，可以直接復制使用改進。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}input[type="number"] {-moz-appearance: textfield;}</style> </head> <body><div style="display: flex; align-items: center; flex-direction: column;"><h1>心算口算天天練</h1><div style="display: flex;"><div id="fistText"></div><div id ="signText"></div><div id ="lastText"></div><div>=</div><input style="width: 40px;" type="number" id="value" ><div onclick="mySuer()" style="margin-left: 10px;border: 1px solid #999; padding: 1px 3px; border-radius: 3px;">確定</div></div></div><script>let result;start()function start(){let firstNum=Math.floor(Math.random()*(99))+1//這里只有三個運算方式 + - * 。//如果要做除的話可以使用兩個數的乘積來得到 firstNumlet sign = Math.floor(Math.random()*(3))+1let lastNum=Math.floor(Math.random()*(99))+1;let num;if(firstNum<lastNum){num=firstNumfirstNum = lastNumlastNum = num}//隨機生成的sign為那種運算switch(sign){case 1 :result=firstNum+lastNumtextDom(firstNum,"+",lastNum)breakcase 2 :result=firstNum-lastNumtextDom(firstNum,"-",lastNum)breakcase 3://如果兩個數都大于10 則選擇小一點的數作為后面的乘數（感覺有點問題）//保證第二位為個位數或者最大只能為10if(firstNum>10&&lastNum>10){lastNum = Math.round(lastNum/10)+1}result = firstNum*lastNumtextDom(firstNum,"×",lastNum)break}}document.onkeydown = function (e) { // 回車提交表單// 兼容FF和IE和Operavar theEvent = window.event || e;var code = theEvent.keyCode || theEvent.which || theEvent.charCode;if (code == 13) {mySuer()}}//判斷函數function mySuer(){let value = document.querySelector("#value")if(value.value-0===result){alert("正確")value.value=""start()}else{alert("錯誤！答案是："+result)}}//修改頁面值函數function textDom(a,b,c){let fistT = document.querySelector("#fistText")let signT = document.querySelector("#signText")let lastT = document.querySelector("#lastText")fistT.innerHTML=asignT.innerHTML=blastT.innerHTML=c} </script> </body> </html>總結
以上是生活随笔為你收集整理的使用原生js，写了一个心算口算天天练的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数学建模之MATLAB编程
- 下一篇： Linux（Ubuntu 22.04）学