网站备案信息可以改吗,百度快照如何优化,深圳火狼设计公司招聘网站,动漫模板素材Demo介绍 一个加减法随机数生成器#xff0c;它能够生成随机的加减法题目#xff0c;并且支持用户输入答案。系统会根据用户输入的答案判断是否正确#xff0c;统计正确和错误的次数#xff0c;并显示历史记录和错题记录。该工具适合用于数学练习#xff0c;尤其适合练习基…Demo介绍 一个加减法随机数生成器它能够生成随机的加减法题目并且支持用户输入答案。系统会根据用户输入的答案判断是否正确统计正确和错误的次数并显示历史记录和错题记录。该工具适合用于数学练习尤其适合练习基本的加减法运算。 JavaScript 代码
变量初始化 correctCount 和 wrongCount用于存储用户答对和答错的次数randomNum控制生成的随机数的范围默认是 20previousEquations存储用户回答的所有算式correctEquations 和 wrongEquations分别记录答对和答错的算式showWrongRecords 控制是否显示错题记录 核心功能 **编辑功能**点击“修改”按钮可以编辑 randomNum即加减法题目的最大值范围。修改后点击“确定”会禁用输入框**计时功能**通过 setInterval 每秒更新一次计时器显示自页面加载以来的耗时 随机数生成和算式生成 generateRandomNumber()生成 1 到 randomNum 之间的随机整数generateRandomOperation()以 50% 概率生成“加法”或“减法”generateRandomEquation()根据生成的两个随机数和运算符构建一个加减法算式。如果是加法且结果大于 randomNum则改为减法如果是减法且第一个数小于第二个数则交换两个数的顺序。 答案判断 checkAnswer()监听用户输入按回车键后检查用户输入的答案是否正确。若正确增加正确次数并将算式添加到正确记录中若错误增加错误次数并将算式添加到错误记录中eval() 用于计算生成的算式的结果 更新和显示题目 每次用户回答正确后调用 generateNewEquation() 函数生成一个新的随机算式显示题目equation 显示算式equation2 显示带等号的算式showRes 显示算式的树形结构即数字在上下排布的样式帮助用户理解运算顺序 历史记录 使用 previousEquations 存储所有的算式和对应的答案历史记录可以按顺序显示通过点击“切换记录”按钮可以切换查看错题记录错误的算式和历史记录包括正确和错误的算式 统计功能 页面右侧显示正确回答次数和错误回答次数 键盘事件监听 使用 document.addEventListener(‘keypress’, checkAnswer) 来监听用户的输入并在用户按下回车键时进行答案检查 交互流程 页面加载时默认生成一个加减法算式并显示在页面中用户在输入框中输入答案并按下回车键 如果答案正确显示“回答正确”并生成一个新的算式如果答案错误显示“回答错误” 用户可以通过点击“切换记录”按钮查看历史记录或错题记录用户点击“修改”按钮时可以修改加减法题目的最大数值默认为20页面会不断更新统计信息显示正确和错误的次数 完整代码
!DOCTYPE html
htmlheadtitle加减法随机数生成器/titlestyle/* 页面样式设置 */body {margin: 0;}.calculate {height: 97vh;overflow: scroll;text-align: center;border: 8px groove #fff;}html::-webkit-scrollbar,.calculate::-webkit-scrollbar {width: 0;height: 0;}.calculate .top {position: relative;}.calculate .title {height: 40px;line-height: 40px;font-size: 32px;font-weight: bold;text-align: center;}.calculate .title input {width: 50px;height: 100%;text-align: center;font-size: 32px;font-weight: bold;border: none;}.calculate .top .btn {position: absolute;top: 5px;right: 10px;display: flex;justify-content: space-around;}.calculate .top .btn div {width: 100px;background: #7bcafc;color: #fff;border-radius: 20px;height: 35px;line-height: 35px;cursor: pointer;margin-left: 10px;}.calculate #container {display: flex;justify-content: space-around;background: rgb(241, 245, 251);height: 80%;margin: 0 auto;border-radius: 8px;}.calculate #container .title {background: #fff;border-radius: 20px;width: 50%;margin: 10px auto;height: 40px;line-height: 40px;}#timer {width: 100%;text-align: center;font-size: 20px;}#equation {font-size: 40px;font-weight: bold;text-align: center;margin-bottom: 20px;display: none;}#equation2 {font-size: 40px;font-weight: bold;text-align: center;margin-bottom: 20px;display: none;}.tree {font-size: 40px;font-weight: bold;}.tree p {line-height: 0;text-align: right;}.tree .fuhao {text-align: left;}.line {width: 100%;height: 3px;background: #000;}#answer {font-size: 24px;width: 200px;padding: 10px;margin-bottom: 20px;}#result {font-size: 30px;font-weight: bold;text-align: center;margin-bottom: 10px;color: red;}.correct {color: green;}.wrong {color: red;}#statistics {margin-top: 20px;text-align: center;}#previousEquations {height: 88%;overflow: scroll;overflow-y: scroll;font-size: 20px;line-height: 1.5;column-count: 4;column-gap: 10px;text-align: right;}.equation-row {display: flex;justify-content: flex-start;margin-bottom: 10px;}.equation-item {display: inline-block;width: 125px;text-align: center;margin-right: 10px;margin-bottom: 10px;padding: 5px;border: 1px solid #ccc;border-radius: 5px;}/style
/headbodydiv classcalculatediv classtopdiv classtitle!-- 显示最大随机数的输入框默认20 --input value20 readonly /内加减法随机数生成器/divdiv classbtndiv idtoggleRecordsBtn切换记录/divdiv idedit修改/div/divdivp idtimer耗时0秒/p/div/divdiv idcontainerdiv stylewidth: 40%;h2 classtitle stylewidth: 70%;随机算术/h2div stylewidth: 20%; margin-left: 40%!-- 随机算式显示区域 --p idequation/pp idequation2/pp idshowRes/pp classline/p/div!-- 用户输入答案的输入框 --input typetext idanswer placeholder请输入答案 autocompleteoffp idresult/pdiv idstatisticsp idcorrectCount回答正确次数0/pp idwrongCount回答错误次数30/p/div/divdiv stylewidth: 60%;h2 classtitle idhistoryTitle历史结果/h2!-- 历史记录显示区域 --div idpreviousEquations/div/div/div/divscript// 正确和错误的答题次数初始化var correctCount 0;var wrongCount 30;// 初始最大随机数范围为20var randomNum 20;// 用于保存历史记录和错题记录var previousEquations []; // 所有的算式var correctEquations []; // 正确的算式var wrongEquations []; // 错误的算式var showWrongRecords false; // 当前是否展示错题记录// 记录开始时间用于计时var startTime new Date().getTime();var timerElement document.getElementById(timer);const edit document.querySelector(#edit);const input document.querySelector(.title input);// 点击“修改”按钮允许用户修改最大随机数edit.addEventListener(click, () {if (edit.textContent 修改) {input.readOnly false;input.focus();edit.textContent 确定} else {input.readOnly true;input.blur();const value input.value;edit.textContent 修改input.style.border none;randomNum value; // 修改最大随机数}});// 更新计时器function updateElapsedTime() {var currentTime new Date().getTime();var elapsedTime Math.floor((currentTime - startTime) / 1000); // 换算为秒if (elapsedTime 60) {var minutes Math.floor(elapsedTime / 60);var seconds elapsedTime % 60;timerElement.textContent 耗时 minutes 分 seconds 秒;} else {timerElement.textContent 耗时 elapsedTime 秒;}}// 每秒更新一次计时器setInterval(updateElapsedTime, 1000);// 生成1到randomNum之间的随机数function generateRandomNumber() {return Math.floor(Math.random() * randomNum) 1; // 生成1到randomNum之间的随机数}// 随机生成加法或减法function generateRandomOperation() {return Math.random() 0.5 ? : -; // 以50%的概率生成加减法}// 生成随机算式function generateRandomEquation() {var number1 generateRandomNumber();var number2 generateRandomNumber();var operation generateRandomOperation();if (operation number1 number2 randomNum) {operation -; // 如果加法结果超过最大值则改为减法}if (operation - number1 number2) {var temp number1;number1 number2;number2 temp; // 如果减法第一个数小于第二个数交换}let res number1 operation number2;let show div classtreep number1 /pp classfuhao operation /pp number2 /p/div;let obj {res,show};return obj;}// 检查用户输入的答案function checkAnswer(event) {if (event.keyCode 13) { // 检测是否按下回车键var userInput document.getElementById(answer).value;var equation document.getElementById(equation).textContent;var result eval(equation); // 使用eval计算算式的结果if (userInput ) {return;}var isCorrect parseInt(userInput) result;// 判断答案是否正确if (isCorrect) {correctCount;previousEquations.push(span classequation-item correct equation userInput √/span);correctEquations.push(span classequation-item correct equation userInput √/span);document.getElementById(result).textContent 回答正确;} else {wrongCount;previousEquations.push(span classequation-item wrong equation userInput ×/span);let equationItem span classequation-item wrong equation /span;if (!wrongEquations.includes(equationItem)) {wrongEquations.push(equationItem); // 错题不重复}document.getElementById(result).textContent 回答错误;}document.getElementById(correctCount).textContent 回答正确次数 correctCount;document.getElementById(wrongCount).textContent 回答错误次数 wrongCount;document.getElementById(previousEquations).innerHTML previousEquations.join();// 答对了清空输入框并生成新题if (isCorrect) {generateNewEquation();}document.getElementById(answer).value ; // 清空输入框document.getElementById(answer).focus(); // 聚焦输入框showWrongRecords false;showHistory();}}// 生成新的随机算式function generateNewEquation() {document.getElementById(answer).value ; // 清空输入框document.getElementById(result).textContent ; // 清空结果显示var equation;var show;var result;// 确保生成的算式结果是非负数do {let fun generateRandomEquation();equation fun.res;show fun.show;result eval(equation);} while (result 0); // 重新生成随机算式直到结果不是负数为止document.getElementById(equation).textContent equation;document.getElementById(equation2).textContent equation ;document.getElementById(showRes).innerHTML show;}// 显示历史记录或错题记录function showHistory() {var historyTitle document.getElementById(historyTitle);var previousBox document.getElementById(previousEquations);if (showWrongRecords) {historyTitle.textContent 错题记录;previousBox.innerHTML wrongEquations.join();} else {historyTitle.textContent 历史记录;previousBox.innerHTML previousEquations.join();}}// 切换显示历史记录或错题记录function toggleRecords() {showWrongRecords !showWrongRecords;showHistory();}document.addEventListener(keypress, checkAnswer); // 监听键盘按键事件generateNewEquation(); // 生成第一道题目document.getElementById(answer).focus(); // 页面加载后将焦点聚焦到输入框var toggleRecordsBtn document.getElementById(toggleRecordsBtn);toggleRecordsBtn.addEventListener(click, toggleRecords); // 点击切换记录按钮/script
/body/html
