【娱乐项目】竖式算术器

Demo介绍

一个加减法随机数生成器，它能够生成随机的加减法题目，并且支持用户输入答案。系统会根据用户输入的答案判断是否正确，统计正确和错误的次数，并显示历史记录和错题记录。该工具适合用于数学练习，尤其适合练习基本的加减法运算。

JavaScript 代码

  1. 变量初始化
  • correctCount 和 wrongCount：用于存储用户答对和答错的次数
  • randomNum：控制生成的随机数的范围，默认是 20
  • previousEquations：存储用户回答的所有算式
  • correctEquations 和 wrongEquations：分别记录答对和答错的算式
  • showWrongRecords 控制是否显示错题记录
  1. 核心功能
  • **编辑功能：**点击“修改”按钮可以编辑 randomNum，即加减法题目的最大值范围。修改后，点击“确定”会禁用输入框
  • **计时功能：**通过 setInterval 每秒更新一次计时器，显示自页面加载以来的耗时
  • 随机数生成和算式生成：
  1. generateRandomNumber()：生成 1 到 randomNum 之间的随机整数
  2. generateRandomOperation()：以 50% 概率生成“加法”或“减法”
  3. generateRandomEquation()：根据生成的两个随机数和运算符构建一个加减法算式。如果是加法且结果大于 randomNum，则改为减法；如果是减法且第一个数小于第二个数，则交换两个数的顺序。
  • 答案判断：
  1. checkAnswer()：监听用户输入，按回车键后检查用户输入的答案是否正确。若正确，增加正确次数并将算式添加到正确记录中；若错误，增加错误次数并将算式添加到错误记录中
  2. eval() 用于计算生成的算式的结果
  • 更新和显示题目：
  1. 每次用户回答正确后，调用 generateNewEquation() 函数生成一个新的随机算式
  2. 显示题目：equation 显示算式，equation2 显示带等号的算式，showRes 显示算式的树形结构（即数字在上下排布的样式，帮助用户理解运算顺序）
  • 历史记录：
  1. 使用 previousEquations 存储所有的算式和对应的答案，历史记录可以按顺序显示
  2. 通过点击“切换记录”按钮，可以切换查看错题记录（错误的算式）和历史记录（包括正确和错误的算式）
  • 统计功能：
    页面右侧显示正确回答次数和错误回答次数
  • 键盘事件监听：
    使用 document.addEventListener(‘keypress’, checkAnswer) 来监听用户的输入，并在用户按下回车键时进行答案检查

交互流程

  • 页面加载时，默认生成一个加减法算式，并显示在页面中
  • 用户在输入框中输入答案并按下回车键
  1. 如果答案正确，显示“回答正确”，并生成一个新的算式
  2. 如果答案错误，显示“回答错误”
  • 用户可以通过点击“切换记录”按钮查看历史记录或错题记录
  • 用户点击“修改”按钮时，可以修改加减法题目的最大数值（默认为20）
  • 页面会不断更新统计信息，显示正确和错误的次数

完整代码

<!DOCTYPE html>
<html><head><title>加减法随机数生成器</title><style>/* 页面样式设置 */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>
</head><body><div class="calculate"><div class="top"><div class="title"><!-- 显示最大随机数的输入框，默认20 --><input value="20" readonly />内加减法随机数生成器</div><div class="btn"><div id="toggleRecordsBtn">切换记录</div><div id="edit">修改</div></div><div><p id="timer">耗时：0秒</p></div></div><div id="container"><div style="width: 40%;"><h2 class="title" style="width: 70%;">随机算术</h2><div style="width: 20%; margin-left: 40%"><!-- 随机算式显示区域 --><p id="equation"></p><p id="equation2"></p><p id="showRes"></p><p class="line"></p></div><!-- 用户输入答案的输入框 --><input type="text" id="answer" placeholder="请输入答案" autocomplete="off"><p id="result"></p><div id="statistics"><p id="correctCount">回答正确次数：0</p><p id="wrongCount">回答错误次数：30</p></div></div><div style="width: 60%;"><h2 class="title" id="historyTitle">历史结果</h2><!-- 历史记录显示区域 --><div id="previousEquations"></div></div></div></div><script>// 正确和错误的答题次数初始化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 class="tree"><p>' + number1 + '</p><p class="fuhao">' + operation + '</p><p>' + 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 class="equation-item correct">' + equation + ' = ' + userInput + ' √</span>');correctEquations.push('<span class="equation-item correct">' + equation + ' = ' + userInput + ' √</span>');document.getElementById('result').textContent = '回答正确！';} else {wrongCount++;previousEquations.push('<span class="equation-item wrong">' + equation + ' = ' + userInput + ' ×</span>');let equationItem = '<span class="equation-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>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/62582.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java抛出自定义运行运行

Java抛出自定义运行运行

1.重新生成异常的.java文件 Empty&#xff1a;空 Exception&#xff1a;异常 加起来就是 空指针异常的文件 2.打上extends 运行的异常&#xff08;异常的类型&#xff09; 3.点击ctrlo&#xff0c;选着这两个快捷重写 4.在需要抛出异常的地方写上&#xff1a;th…
阅读更多...
使用Github Action将Docker镜像转存到阿里云私有仓库，供国内服务器使用，免费易用

使用Github Action将Docker镜像转存到阿里云私有仓库，供国内服务器使用，免费易用

文章目录 一、前言二、 工具准备&#xff1a;三、最终效果示例四、具体步骤第一大部分是配置阿里云1. 首先登录阿里云容器镜像服务 [服务地址](https://cr.console.aliyun.com/cn-hangzhou/instances)2. 选择个人版本3. 创建 命名空间4. 进入访问凭证来查看&#xff0c;用户名字…
阅读更多...
YOLO系列论文综述（从YOLOv1到YOLOv11）【第13篇：YOLOv10——实时端到端物体检测】

YOLO系列论文综述（从YOLOv1到YOLOv11）【第13篇：YOLOv10——实时端到端物体检测】

YOLOv10 1 摘要2 网络结构3 YOLOv1-v10对比 YOLO系列博文&#xff1a; 【第1篇&#xff1a;概述物体检测算法发展史、YOLO应用领域、评价指标和NMS】【第2篇&#xff1a;YOLO系列论文、代码和主要优缺点汇总】【第3篇&#xff1a;YOLOv1——YOLO的开山之作】【第4篇&#xff1a…
阅读更多...
Cursor AI快捷键的使用场景及作用

Cursor AI快捷键的使用场景及作用

快捷键 Cursor AI 编辑器提供了一系列快捷键&#xff0c;以提高开发者的编程效率和体验。以下是几个常用的快捷键及其使用场景和作用&#xff1a; Ctrl L 或 CMD L&#xff1a; 使用场景&#xff1a;打开对话框&#xff0c;用于与 AI 进行交互。作用&#xff1a;通过对话框&…
阅读更多...
Figma入门-自动布局

Figma入门-自动布局

Figma入门-自动布局 前言 在之前的工作中&#xff0c;大家的原型图都是使用 Axure 制作的&#xff0c;印象中 Figma 一直是个专业设计软件。 最近&#xff0c;很多产品朋友告诉我&#xff0c;很多原型图都开始用Figma制作了&#xff0c;并且很多组件都是内置的&#xff0c;对…
阅读更多...
《Java核心技术I》队列与双端队列以及优先队列

《Java核心技术I》队列与双端队列以及优先队列

队列与双端队列 队列允许你高效的在尾部添加元素&#xff0c;并在头部删除元素。 双端队列(deque)&#xff1a;允许在头部和尾部都高效的添加或删除元素&#xff0c;不支持在中间添加元素。ArrayDeque和LinkedList实现了这个接口。 以下是两个接口的API: java.util.Queue 5…
阅读更多...
零基础学安全--Burp Suite（4）proxy模块以及漏洞测试理论

零基础学安全--Burp Suite（4）proxy模块以及漏洞测试理论

目录 学习连接 一些思路 proxy模块 所在位置 功能简介 使用例子 抓包有一个很重要的点&#xff0c;就是我们可以看到一些在浏览器中看不到的传参点&#xff0c;传参点越多就意味着攻击面越广 学习连接 声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可…
阅读更多...
CAD 文件 批量转为PDF或批量打印

CAD 文件 批量转为PDF或批量打印

CAD 文件 批量转为PDF或批量打印&#xff0c;还是比较稳定的 1.需要本地安装CAD软件 2.通过 Everything 搜索工具搜索&#xff0c;DWG To PDF.pc3 &#xff0c;获取到文件目录 &#xff0c;替换到代码中&#xff0c; originalValue ACADPref.PrinterConfigPath \ r"C:…
阅读更多...
【Linux网络编程】TCP套接字

【Linux网络编程】TCP套接字

TCP与UDP的区别&#xff1a; udp是无连接的、面向数据报&#xff08;通信时以数据报为单位传输&#xff09;的传输层通信协议&#xff0c;其中每个数据报都是独立的&#xff0c;通信之前不需要建立连接&#xff0c;bind绑定套接字后直接可以进行通信。 tcp是面向连接的、基于字…
阅读更多...
spring-boot-maven-plugin 标红

spring-boot-maven-plugin 标红

情况&#xff1a;创建好 Spring Boot 项目后&#xff0c;pom.xml 文件中 spring-boot-maven-plugin 标红。 解决方案&#xff1a;加上 Spring Boot 的版本即可解决。
阅读更多...
xv6前置知识

xv6前置知识

fork函数 一个进程，包括代码、数据和分配给进程的资源。fork（）函数通过系统调用创建一个与原来进程几乎完全相同的进程，也就是两个进程可以做完全相同的事，但如果初始参数或者传入的变量不同，两个进程也可以做不同的事。 一个进程调用fork（）函数后，系统先给新的进程分…
阅读更多...
（11）(2.2) BLHeli32 and BLHeli_S ESCs（二）

（11）(2.2) BLHeli32 and BLHeli_S ESCs（二）

文章目录 前言 1 传递支持 前言 BLHeli 固件和配置应用程序的开发是为了允许配置 ESC 并提供额外功能。带有此固件的 ESC 允许配置定时、电机方向、LED、电机驱动频率等。在尝试使用 BLHeli 之前&#xff0c;请按照 DShot 设置说明进行操作(DShot setup instructions)。 1 传…
阅读更多...
Flink的双流join理解

Flink的双流join理解

如何保证Flink双流Join准确性和及时性、除了窗口join还存在哪些实现方式、究竟如何回答才能完全打动面试官呢。。你将在文中找到答案。 1 引子 1.1 数据库SQL中的JOIN 我们先来看看数据库SQL中的JOIN操作。如下所示的订单查询SQL&#xff0c;通过将订单表的id和订单详情表ord…
阅读更多...
1.1 数据结构的基本概念

1.1 数据结构的基本概念

1.1.1 基本概念和术语 一、数据、数据对象、数据元素和数据项的概念和关系 数据&#xff1a;是客观事物的符号表示&#xff0c;是所有能输入到计算机中并被计算机程序处理的符号的总称。 数据是计算机程序加工的原料。 数据对象&#xff1a;是具有相同性质的数据元素的集合&…
阅读更多...
Web实时通信@microsoft/signalr

Web实时通信@microsoft/signalr

概要说明 signalr 是微软对 websocket技术的封装; build() 与后端signalR服务建立链接&#xff1b;使用 on 方法监听后端定义的函数&#xff1b;ps&#xff1a;由后端发起&#xff0c;后端向前端发送数据使用 invoke 主动触发后端的函数&#xff1b;ps&#xff1a;由前端发起&a…
阅读更多...
【程序人生】“阶段总结“-前路茫茫

【程序人生】“阶段总结“-前路茫茫

岁月如白驹过隙&#xff0c;如指尖流沙&#xff0c;不知不觉已经离开了陪伴我度过四年岁月的学校&#xff0c;离开了那间堆满各种书籍的宿舍&#xff0c;离开了通宵开发的实验室&#xff0c;离开了教室里的最后一排课桌椅......&#xff08;虽然&#xff0c;我并不是很喜欢它&a…
阅读更多...
Android 13 编译Android Studio版本的Launcher3

Android 13 编译Android Studio版本的Launcher3

Android 13 Aosp源码 源码版本Android Studio版本Launcher3QuickStepLib (主要代码) Launcher3ResLib(主要资源)Launcher3IconLoaderLib(图
阅读更多...
数据库学习记录02

数据库学习记录02

DQL【数据查询语言】 1.基础查询 1.1语法 select * | {[DISTINCT] column | expression[alias], ...} from table; 特点 查询列表可以是表中的字段、常量值、表达式、函数。 查询的结果是一个虚拟的表格。 #1.查询表中的单个字段 select name from employees;#2.查询表中…
阅读更多...
采用片上光学相控阵的激光雷达

采用片上光学相控阵的激光雷达

激光雷达基础知识 LIDAR 基于众所周知的 RADAR 原理雷达是20世纪初就存在的著名技术激光雷达使用光频率而不是无线电波 激光雷达和雷达 使用相控阵的激光雷达通过干涉来提高方向性 激光雷达的输出剖面是阵列因子和单天线远场的乘积。 N &#xff1a;天线数量 k &#xff1a;…
阅读更多...
【通信协议】CAN总线通信协议的学习，（三）stm32f103系列单片机，can通信的代码实现

【通信协议】CAN总线通信协议的学习，（三）stm32f103系列单片机，can通信的代码实现

目录 1、CAN 的基本知识 2、CAN的cubemx配置 3、CAN的代码实现 3.0、初始化&#xff0c;认识函数及变量 3.1、CAN发送 3.1.1、代码1 3.1.2、代码2 3.1.3、代码3 3.2、CAN中断接收 3.2.1、代码1 3.2.2、代码2 3.2.3、代码3 3.3、过滤器 3.3.1、代码1 3.3.2、代码…
阅读更多...
最新文章

Copyright @ 2022~2023