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

【娱乐项目】竖式算术器

news 2025/8/31 8:13:07

Demo介绍

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

JavaScript 代码

变量初始化

correctCount 和 wrongCount：用于存储用户答对和答错的次数
randomNum：控制生成的随机数的范围，默认是 20
previousEquations：存储用户回答的所有算式
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>
<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介绍一个加减法随机数生成器，它能够生成随机的加减法题目，并且支持用户输入答案。系统会根据用户输入的答案判断是否正确，统计正确和错误的次数，并显示历史记录和错题记录。该工具适合用于数学练习，尤其适合练习基…...

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

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

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

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

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

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

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

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

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

编程日记 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推流，在之前的文章里其实小芹和大家聊过很多，不过今天偶然搜索发现还是有很多小伙伴，在搜索像素流送相关的问题，搜索引擎给的提示有这些。当然这些都是比较短的词汇，可能每个人真正遇到的问题和想获取的…...

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

字符型注入‘)闭合

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

编程日记 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_定时器

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

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

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

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

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

前端性能优化技巧

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

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

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

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

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

Linux：systemd进程管理【1】

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

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

【Maven】继承和聚合

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

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

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

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

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

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

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

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

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

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

编程日记 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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/8/31 2:19:16

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分）《Learning Humanoid Standing-up Control across Diverse Postures》系列文章：论文深度解读 + 算法与代码分析（二）作者机构：上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学论文主题：人形机器人…...

编程新知 2025/8/4 18:55:37

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...

编程新知 2025/8/26 13:56:17

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

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

编程新知 2025/8/28 21:54:44

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤运行安装程序： 双击下载的.exe安装文件如果出现安全提示&…...

编程新知 2025/8/6 0:07:38

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...

编程新知 2025/7/18 2:05:01

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/8/10 12:06:15