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

【娱乐项目】竖式算术器

news 2026/2/7 19:21:10

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

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2026/1/29 5:29:57

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/1/20 19:15:45

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2026/1/24 6:30:25

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2026/1/25 14:15:52

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

编程新知 2026/1/31 9:25:11