当前位置： 首页 > news >正文

【娱乐项目】竖式算术器

news 2025/10/16 22:13:00

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>

在这里插入图片描述

相关文章：

【娱乐项目】竖式算术器

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

编程日记 2024/11/30 10:13:20

Qt中模拟鼠标消息并与系统鼠标消息进行区分

功能使用场景&#xff1a; 开发一个教学系统&#xff0c;包含了教师端、学生端&#xff0c;并且教师端支持示教功能。此时&#xff0c;学生端的鼠标、键盘不响应系统事件&#xff0c;但需要响应教师端发过来的鼠标移动、按下消息。 因为共享页面相同&#xff0c;为了提高局域…...

编程日记 2024/11/30 10:10:16

实时数据开发 | 一文理解Flink窗口机制

窗口操作在流处理和批处理之间起到了桥梁的作用。 Flink引擎本质上是流式引擎&#xff0c;认为批处理是流处理的一个特例。因此&#xff0c;通过窗口将流数据划分为有限大小的集合&#xff0c;使得在这些有界的数据集上可以进行批处理风格的计算。 通过配置窗口的参数&#xf…...

编程日记 2024/11/30 10:09:11

MFC 自定义树控件：树节点的样式与交互

在本教程中&#xff0c;将介绍如何在 MFC 应用程序中使用树控件 (CTreeCtrl) 进行高级定制&#xff0c;包括设置字体、颜色、徽章、图标、节点的高度等。通过这些自定义设置&#xff0c;可以显著提升用户界面的交互性和视觉效果。 1. 树控件基本设置 首先&#xff0c;我们需要…...

编程日记 2024/11/30 10:08:09

YOLOv8-ultralytics-8.2.103部分代码阅读笔记-loss.py

loss.py ultralytics\utils\loss.py 目录 loss.py 1.所需的库和模块 2.class VarifocalLoss(nn.Module): 3.class FocalLoss(nn.Module): 4.class DFLoss(nn.Module): 5.class BboxLoss(nn.Module): 6.class RotatedBboxLoss(BboxLoss): 7.class KeypointLoss(n…...

编程日记 2024/11/30 10:05:06

像素流送api ue多人访问需要什么显卡服务器

关于像素流送UE推流&#xff0c;在之前的文章里其实小芹和大家聊过很多&#xff0c;不过今天偶然搜索发现还是有很多小伙伴&#xff0c;在搜索像素流送相关的问题&#xff0c;搜索引擎给的提示有这些。当然这些都是比较短的词汇&#xff0c;可能每个人真正遇到的问题和想获取的…...

编程日记 2024/11/30 10:04:04

字符型注入‘)闭合

前言 进行sql注入的时候&#xff0c;不要忘记闭合&#xff0c;先闭合再去获取数据 步骤 判断是字符型注入 用order by获取不了显位&#xff0c;select也一样 是因为它是’)闭合&#xff0c;闭合之后&#xff0c;就可以获取数据了 最后就是一样的步骤...

编程日记 2024/11/30 10:03:03

评分规则的建模，用户全选就是满分10分(分数可自定义), 选2个5分, 选2个以下0分

子夜(603***854) 15:11:40 和各位讨论一下设计问题: 有个有业务场景: 有一组产品共4个产品(数目用户可自定义), 需要一套规则,比如如果用户全选就是满分10分(分数可自定义), 选2个5分, 选2个以下0分 又比如另一组产品 产品有个必选属性,如果选了其中所有的必选则5分, 其他项每1…...

编程日记 2024/11/30 10:02:02

Elasticsearch与NLP的深度融合：文本嵌入与向量搜索实战指南

Elasticsearch与NLP的深度融合：文本嵌入与向量搜索实战指南 引言 在当今信息爆炸的时代，如何从海量文本数据中快速准确地检索出相关信息，成为了一个迫切需要解决的问题。自然语言处理（NLP）技术的发展为这一挑战提供了新的解决方案。Elasticsearch，作为一个强大的搜索引…...

编程日记 2024/11/30 10:01:00

4. STM32_定时器

概述 什么是定时器&#xff1a; 定时器核心就是计数器&#xff0c;是使用精准的时基&#xff0c;通过硬件的方式&#xff0c;实现定时功能的器件。 定时器的工作原理&#xff1a; 主频时钟CLK通过PSC进行分频后产生定时器时钟TIM CLK&#xff0c;计数器CNT根据TIM CLK的频率…...

编程日记 2024/11/30 9:58:55

Mysql 深度分页问题及优化方案

Mysql 深度分页问题及优化方案 一、为什么 MySQL 深度分页慢&#xff1f;二、优化方案三、补充 一、为什么 MySQL 深度分页慢&#xff1f; 在数据量大时&#xff0c;深分页查询速度缓慢&#xff0c;主要原因是多次回表查询。 前言&#xff1a;N个条件为索引&#xff0c;id为主…...

编程日记 2024/11/30 9:57:53

前端性能优化技巧

前端性能优化技巧 1. 介绍 前端性能优化是确保网站或应用程序快速、响应迅速和流畅的关键。本文档将详细探讨提升前端性能的各种策略和最佳实践。 2. 资源加载优化 2.1 资源压缩 代码压缩&#xff1a;使用 Webpack、Terser 等工具压缩 JavaScript、CSS 文件文件大小压缩&a…...

编程日记 2024/11/30 9:55:51

taro使用createAsyncThunk报错ReferenceError: AbortController is not defined

解决办法&#xff1a; 1&#xff0c;安装这俩包&#xff1a;yet-another-abortcontroller-polyfill&#xff0c;event-target-polyfill 2&#xff0c;app.js import&#xff1a; import ‘event-target-polyfill’; import ‘yet-another-abortcontroller-polyfill’; 补充 但…...

编程日记 2024/11/30 9:54:49

Linux：systemd进程管理【1】

整体理解 要快速掌握Linux的systemd并覆盖80%的使用场景&#xff0c;以下是最重要的20%知识点&#xff1a; Systemd简介与核心功能&#xff1a; Systemd是一个系统和服务管理器&#xff0c;作为Linux系统的PID 1进程&#xff0c;负责启动和管理其他系统组件。它提供并行启动服…...

编程日记 2024/11/30 9:51:46

【Maven】继承和聚合

5. Maven的继承和聚合 5.1 什么是继承 Maven 的依赖传递机制可以一定程度上简化 POM 的配置&#xff0c;但这仅限于存在依赖关系的项目或模块中。当一个项目的多个模块都依赖于相同 jar 包的相同版本&#xff0c;且这些模块之间不存在依赖关系&#xff0c;这就导致同一个依赖…...

编程日记 2024/11/30 9:50:44

【线上问题记录 | 排查网络连接问题】

问题描述 现在有我们程序是部署在服务器A的&#xff0c;A链接的是B。程序从B的redis进行存储和取数据的。 我们的业务是: 信息展示&#xff0c;也就是如果发现机器有异常了&#xff0c;实时进行监控。突然发现有一天&#xff0c;信息显示延迟了。 然后我们就开始排查究竟什么原…...

编程日记 2024/11/30 9:49:43

springboot车辆管理系统设计与实现(代码+数据库+LW)

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了车辆管理系统的开发全过程。通过分析车辆管理系统管理的不足&#xff0c;创建了一个计算机管理车辆管理系统的方案。文章介绍了车辆管理系统的系统分析部分&…...

编程日记 2024/11/30 9:43:37

独家｜京东调整职级序列体系

原有的M、P、T、S主序列将正式合并为新的专业主序列P。 作者|文昌龙 编辑|杨舟 据「市象」独家获悉&#xff0c;京东已在近日在内部宣布对职级序列体系进行调整&#xff0c;将原有的M、P、T、S主序列正式合并为新的专业主序列P&#xff0c;合并后的职级体系将沿用原有专业序…...

编程日记 2024/11/30 9:42:36

Arrays.copyOfRange(),System.arraycopy() 数组复制,数组扩容

Arrays.copyOfRange() 当需要将数组中的 长度扩容时, 数组复制 使用 需要用到Arrays 类提供的的 参数解析 * param original the array from which a range is to be copied * param from the initial index of the range to be copied, inclusive * param to the final ind…...

编程日记 2024/11/30 9:41:35

Python学习37天

# 魔术方法 # 创建类Monster,默认为object的子类 class Monster: name None age None gender None def __init__(self, name, age, gender): self.name name self.age age self.gender gender # 重写魔术方法__str__输出实例对象信息…...

编程日记 2024/11/30 9:39:29

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/9/28 0:44:00

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/8/8 2:13:29

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/10/16 13:27:44

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/10/10 9:55:46

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/10/14 22:48:53

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2025/9/28 3:20:23

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

编程新知 2025/10/13 19:26:55

基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)

引言 在嵌入式系统中&#xff0c;用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例&#xff0c;介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单&#xff0c;执行相应操作&#xff0c;并提供平滑的滚动动画效果。 本文设计了一个…...

编程新知 2025/10/13 9:29:40

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...

编程新知 2025/10/8 4:15:33

echarts使用graphic强行给图增加一个边框（边框根据自己的图形大小设置）- 适用于无法使用dom的样式

pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图&#xff0c;如果边框加在dom上面&#xff0c;pdf-lib导出svg的时候并不会导出边框&#xff0c;所以只能在echarts图上面加边框 grid的边框是在图里…...

编程新知 2025/10/16 20:16:40