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

【娱乐项目】竖式算术器

news 2026/1/15 9:28:07

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/1/14 16:23:06

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

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

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

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

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/2 8:43:37

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/12/4 8:54:35

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2026/1/15 5:02:37

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2026/1/15 5:27:22

大数据治理的常见方式

大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法&#xff0c;以下是几种常见的治理方式&#xff1a; 1. 数据质量管理 核心方法&#xff1a; 数据校验&#xff1a;建立数据校验规则&#xff08;格式、范围、一致性等&#xff09;数据清洗&…...

编程新知 2025/10/6 12:34:16

GAN模式奔溃的探讨论文综述（一）

简介 简介：今天带来一篇关于GAN的，对于模式奔溃的一个探讨的一个问题，帮助大家更好的解决训练中遇到的一个难题。 论文题目：An in-depth review and analysis of mode collapse in GAN 期刊：Machine Learning 链接：...

编程新知 2026/1/15 2:45:28

iOS 项目怎么构建稳定性保障机制？一次系统性防错经验分享（含 KeyMob 工具应用）

崩溃、内存飙升、后台任务未释放、页面卡顿、日志丢失——稳定性问题&#xff0c;不一定会立刻崩&#xff0c;但一旦积累&#xff0c;就是“上线后救不回来的代价”。 稳定性保障不是某个工具的功能&#xff0c;而是一套贯穿开发、测试、上线全流程的“观测分析防范”机制。 …...

编程新知 2025/11/18 23:33:59