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

编程笔记 html5cssjs 005 小学数学四则运算练习

news 2025/9/11 21:52:26

编程笔记 html5&css&js 005 小学数学四则运算练习

  • 一、代码
  • 二、解释

这段代码定义了一个页面，用于小学数学四则运算的练习。这可能有点难，实际如果需要可以通过更改代码来达到要求。

一、代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><!-- 设置页面视口，适应不同设备的宽度，并设置初始缩放为1.0 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 页面标题 --><title>小学数学四则运算练习</title><!-- 页面样式定义 --><style>/* 设置页面背景颜色、居中显示、垂直居中、字体大小、颜色和字体 family */body {/* 设置背景颜色为深灰色 */background-color: #333;/* 使用弹性布局使得内容居中 */display: flex;justify-content: center;align-items: center;/* 设置高度为视窗高度，使得内容垂直居中 */height: 100vh;/* 设置字体大小和颜色 */font-size: 60px;color: white;/* 设置字体为Arial或任意 sans-serif 字体 */font-family: Arial, sans-serif;/* 定义容器的文本居中 */.container {text-align: center;}.view {line-height: 100px; /* 设置固定行高 */height: 100px; /* 如果需要强制元素高度一致，可加上height */overflow: hidden; /* 防止内容超出元素高度 */}input[type="text"] {/* 设置字体大小为100px */font-size: 100px;/* 设置宽度为屏幕宽度的30% */width: 30%;/* 设置底部外边距为20px */margin-bottom: 20px;}</style>
</head>
<body>
<div class="container"><p>小学数学四则运算练习</p><!-- 用于显示习题的区域 --><div class="view" id="question">请按回车键生成习题</div><!-- 用于显示答案的区域 --><div class="view" id="answer"></div><!-- 用于显示计时的区域 --><div class="view" id="time"></div><!-- 用于显示结果的区域 --><div class="view" id="result"></div><!-- 用户输入答案的输入框，回车键触发答案检查 --><input type="text" id="user-answer" onkeydown="if (event.keyCode === 13) checkAnswer()"><!-- 提示用户如何使用输入框的文本 --><p>空框时按回车生成习题，输入答案后按回车键验证<br></p>
</div>
<script>// 定义一个数组包含可能的操作数let operands = Array.from({length: 10}, (_, i) =>// 这个函数生成一个随机数。首先使用Math.random()生成一个0到1之间的随机数，然后乘以i < 5 ? 9 : 99的结果，// 再使用Math.floor()取整，之后加上Math.random() < 0.5 ? 0.1 : 0。// 这个表达式会生成一个在0到9.9之间的随机数（如果i小于5），或者在0到99.9之间的随机数（如果i大于等于5）。Math.floor(Math.random() * (i < 5 ? 9 : 99)) + (Math.random() < 0.5 ? 0.1 : 0));function getRandomOperand() {return operands[Math.floor(Math.random() * operands.length)];}// 定义一个数组包含可能的运算符let operators = ['+', '-', '*', '/'];// operators.push('^'); // 添加乘方运算符，但在JS中需要处理function getRandomOperator() {return operators[Math.floor(Math.random() * operators.length)];}function generateExpression(depth = 0, maxDepth = 3) {// 创建一个表达式字符串，同时考虑运算优先级// 该函数用于生成一个随机的数学表达式字符串。函数接受两个参数：depth表示当前生成表达式的深度，默认为0；maxDepth表示生成// 表达式的最大深度，默认为3。函数通过递归的方式生成表达式，根据随机概率选择是否添加括号，并随机选择运算符和操作数。对于乘// 方运算符，确保其右边有操作数；对于其他运算符，两边都可能有操作数。当达到最大深度时，返回一个随机的操作数。最终生成的表达// 式以字符串形式返回。if (depth === maxDepth) {return getRandomOperand().toString();}let expression = '';
// 随机决定是否添加括号if (Math.random() < 0.3 && depth < maxDepth - 1) {expression += '(';expression += generateExpression(depth + 1);expression += ')';} else {expression += getRandomOperand();}let operator = getRandomOperator();if (operator === '^') { // 对于乘方运算，确保右边有操作数expression += '^';expression += generateExpression(depth);} else { // 其他运算符两边都可能有操作数expression += operator;expression += generateExpression(depth + 1);}return expression;}// 计算生成的表达式function calculateExpression(expressionStr) {// 将"^"替换为Math.pow以执行乘方运算expressionStr = expressionStr.replace(/\^/g, '**');// 使用eval计算结果，但请确保表达式来自可靠源，否则有安全风险return eval(expressionStr);}// 生成并计算一个表达式function generateQuestion() {/*** 生成并计算一个表达式，然后将表达式显示在文档中，并返回计算结果（保留两位小数）。* 该过程包括：* 1. 生成一个表达式。* 2. 计算这个表达式的结果。* 3. 将这个表达式显示在页面上。* 4. 返回表达式的计算结果，结果保留两位小数。** @returns {number} 表达式的计算结果，保留两位小数。*/let question = generateExpression(); // 生成一个表达式let answer = calculateExpression(question); // 计算生成的表达式document.getElementById('question').innerText = question; // 将表达式显示在页面上return Number(answer.toFixed(2)); // 返回计算结果，保留两位小数}let currentAnswer;let startTime;function startPractice() {/*** 生成问题并初始化答题界面* 无参数* 无返回值*/currentAnswer = generateQuestion();document.getElementById('answer').innerText = '';document.getElementById('time').innerText = '';document.getElementById('result').innerText = '';startTime = new Date().getTime();}function checkAnswer() {/*** 处理用户提交的答案，并进行判分。* 无参数。* 无返回值。*/let userAnswer = parseFloat(document.getElementById('user-answer').value); // 获取用户输入的答案let currentTime = new Date().getTime(); // 获取当前时间戳let elapsedTime = (currentTime - startTime) / 1000; // 计算答题所用时间，转换为秒// 检查用户输入是否为合法数字if (isNaN(userAnswer) !== true) {userAnswer = Number(userAnswer.toFixed(2)); // 如果是合法数字，则保留两位小数}// 如果用户输入不是合法数字，则重新开始练习if (isNaN(userAnswer)) {startPractice();} else if (userAnswer === currentAnswer) { // 如果用户答案与正确答案相同document.getElementById('answer').innerText = currentAnswer; // 显示正确答案document.getElementById('time').innerText = `用时：${elapsedTime.toFixed(2)}秒`; // 显示用时document.getElementById('result').innerText = '答案正确'; // 显示结果：正确} else { // 如果用户答案与正确答案不同document.getElementById('answer').innerText = currentAnswer; // 显示正确答案document.getElementById('time').innerText = `用时：${elapsedTime.toFixed(2)}秒`; // 显示用时document.getElementById('result').innerText = '答案错误'; // 显示结果：错误}document.getElementById('user-answer').value = ''; // 清空输入框}window.onload = function () {// 将焦点设置到ID为"user-answer"的元素上。document.getElementById("user-answer").focus();};
</script>
</body>
</html>

二、解释

这段HTML代码定义了一个页面，用于小学四则运算的练习。页面具有以下功能：
页面布局与样式：通过CSS定义了页面的整体样式，包括背景颜色、字体大小和颜色、居中显示等内容。
生成随机习题：通过JavaScript函数generateExpression生成一个随机的数学表达式，并将其显示在页面上。
计算答案：使用JavaScript函数calculateExpression计算生成的表达式的答案。
用户交互：用户可以在页面上的输入框中输入答案，然后按回车键验证答案的正确性。答案的验证由checkAnswer函数处理。
显示结果：根据用户答案的正确性，在页面上显示相应的结果。
计时功能：记录用户回答问题所花费的时间，并在页面上显示。
适应不同设备：通过<meta>标签设置页面视口，使页面在不同设备上都能正确显示。
以上是该HTML代码的主要功能。代码中使用了JavaScript和CSS来实现这些功能。

相关文章：

编程笔记 html5cssjs 005 小学数学四则运算练习

编程笔记 html5&css&js 005 小学数学四则运算练习 一、代码二、解释 这段代码定义了一个页面&#xff0c;用于小学数学四则运算的练习。这可能有点难&#xff0c;实际如果需要可以通过更改代码来达到要求。 一、代码 <!DOCTYPE html> <html lang"zh&quo…...

编程日记 2024/3/10 13:33:45

【大厂AI课学习笔记NO.71】AI算力芯片GPU/TPU等

AI算力芯片的发展历程 人工智能&#xff08;AI&#xff09;算力芯片的发展历程紧密地跟随着AI技术的发展脚步。从早期的基于传统中央处理器&#xff08;CPU&#xff09;的计算&#xff0c;到图形处理器&#xff08;GPU&#xff09;的广泛应用&#xff0c;再到专门为AI设计的处…...

编程日记 2024/3/10 13:32:44

浅谈Redis和分布式系统

浅谈Redis Redis用于存储数据&#xff0c;且在内存当中进行存储。 但是在日常编写代码中&#xff0c;定义一个变量也就属于在内存当中存储一个数据。 Redis主要会在分布式系统当中发挥重要作用&#xff0c;如果只是单机程序&#xff0c;直接通过变量存储数据的方式会比使用Re…...

编程日记 2024/3/10 13:29:42

微信小程序onLoad加载定义好的函数

这里小程序开发中容易犯的错误-1 给客户做一个程序。需要在页面加载的时候在onLoad(options){}中加载定义好的函数&#xff0c;代码如下 onLoad(options) {get_week_()},运行时老报错 后来修改为正确的代码 onLoad(options) {this.get_week_()//必须加this},再尝试运行&#x…...

编程日记 2024/3/10 13:24:34

C++进阶：详细讲解继承

现在也是结束了初阶部分的内容&#xff0c;今天开始就进入进阶部分了。一刻也没有为初阶的结束而哀悼&#xff0c;立刻赶来“战场”的是进阶部分里的继承 文章目录 1.继承的概念和定义1.1继承的概念1.2继承的定义1.2.1继承的格式1.2.2再讲访问限定符(详讲protected)1.2.3**继承…...

编程日记 2024/3/10 13:23:33

第十一篇 - 应用于市场营销视频场景中的人工智能和机器学习技术 – Video --- 我为什么要翻译介绍美国人工智能科技巨头IAB公司（1）

IAB平台&#xff0c;使命和功能 IAB成立于1996年&#xff0c;总部位于纽约市。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司&#xff0c;互动广告局&#xff08;IAB- the Interactive Advertising Bureau&#xff09;自1996年成立以来&#xff0c;先后为700多家媒体…...

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

基于决策树实现葡萄酒分类

基于决策树实现葡萄酒分类 将葡萄酒数据集拆分成训练集和测试集&#xff0c;搭建tree_1和tree_2两个决策树模型&#xff0c;tree_1使用信息增益作为特征选择指标&#xff0c;B树使用基尼指数作为特征选择指标&#xff0c;各自对训练集进行训练&#xff0c;然后分别对训练集和测…...

编程日记 2024/3/10 13:17:28

上位机图像处理和嵌入式模块部署（qmacvisual三个特色）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 了解了qmacvisual的配置之后&#xff0c;正常来说&#xff0c;我们需要了解下不同插件的功能是什么。不过我们不用着急&#xff0c;可以继续学习下…...

编程日记 2024/3/10 13:16:27

电脑解锁后黑屏有鼠标--亲测！！不需要重装系统！！

问题&#xff1a;上周电脑黑屏&#xff0c;只有鼠标&#xff0c;鼠标还不能右键&#xff01;&#xff01; 中招&#xff1a;win10系统最新版火绒安全 &#xff0c;那你有概率获得开机黑屏套餐一份。 原因是&#xff1a;火绒把我们的explorer删除了导致黑屏&#xff0c;这个文…...

编程日记 2024/3/10 13:15:26

Spring 事务的种类 ? 传播机制 ?

在Spring框架中&#xff0c;事务管理可以分为编程式事务和声明式事务两种主要形式。每种形式都有其特点和使用场景。以下是这两种形式的具体介绍&#xff1a; 编程式事务 编程式事务是通过编写代码来实现事务管理的。在Spring中&#xff0c;编程式事务管理通常通过Transactio…...

编程日记 2024/3/10 13:14:25

深入了解 Java 方法和参数的使用方法

Java 方法 简介 方法是一块仅在调用时运行的代码。您可以将数据&#xff08;称为参数&#xff09;传递到方法中。方法用于执行特定的操作&#xff0c;它们也被称为函数。 使用方法的原因 重用代码&#xff1a;定义一次代码&#xff0c;多次使用。提高代码的结构化和可读性。…...

编程日记 2024/3/10 13:13:25

自动驾驶技术解析与关键步骤

目录 前言1 自动驾驶主要技术流程1.1 车辆周围环境感知1.2 车辆和行人检测分析1.3 运动轨迹规划 2 关键技术概述2.1 车辆探测与图片输入2.2 行人检测2.3 运动规划2.4 电子地图2.5 轨迹预测2.6 交通灯分析2.7 故障检测 结语 前言 自动驾驶汽车作为未来交通领域的重要发展方向&a…...

编程日记 2024/3/10 13:12:23

[Electron]中IPC进程间通信

Electron中IPC 进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。在 Electron 中&#xff0c;进程使用 ipcMain 和 ipcRenderer 模块&#xff0c;通过开发人员定义的“通道”传递消息来进行通信。 本文介绍以下几个方面&#xff1a; 1-渲染进程到…...

编程日记 2024/3/10 13:07:18

数学建模-动态规划(美赛运用)

动态规划模型的要素是对问题解决的抽象&#xff0c;其可分为&#xff1a; 阶段。指对问题进行解决的自然划分。例如&#xff1a;在最短线路问题中&#xff0c;每进行走一步的决策就是一个阶段。 状态。指一个阶段开始时的自然状况。例如&#xff1a;在最短线路问题中&#xff…...

编程日记 2024/3/10 13:05:17

bat文件给多个Android设备安装apk

本文是安装一个apk 1、确保以下3个文件在同一个目录下 1>要安装的apk&#xff0c;这里是mmb.apk 2>设备名单&#xff0c;保存在.txt文件中&#xff0c;一行一个设备名&#xff0c;设备名通过adb devices获取&#xff0c;截图中是两个设备 txt文件中的样式 3>要运行…...

编程日记 2024/3/10 13:02:14

[数据集][目标检测]光伏板太阳能板缺陷检测数据集VOC+YOLO格式2400张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2400 标注数量(xml文件个数)&#xff1a;2400 标注数量(txt文件个数)&#xff1a;2400 标注…...

编程日记 2024/3/10 12:58:10

深入浅出计算机网络 day.1 概论④ 计算机网络的定义和分类

不要退却&#xff0c;要绽放魅力 我的心会共鸣 和你 —— 24.3.9 一、计算机网络的定义 计算机网络早期的一个最简单定义 现阶段计算机网络的一个较好的定义 二、计算机网络的分类 按交换方式分类 按使用者分类 按传输介质分类 按覆盖范围分类 按拓扑结构分类&#xff0c;可…...

编程日记 2024/3/10 12:56:07

rust引用-借用机制扩展

rust引用-借用机制还是有限制的&#xff0c;比如我们要在多次函数调用中修改参数、跨线程传递参数并发修改的场景&#xff0c;单纯使用引用-借用机制就不灵了&#xff08;这种场景和引用-借用设计思想是冲突的&#xff09;。这时需要借助rust提供的Rc、Arc、Cell、RefCell对机制…...

编程日记 2024/3/10 12:53:05

JVM的工作流程

目录 1.JVM 简介 2.JVM 执行流程 3. JVM 运行时数据区 3.1 堆&#xff08;线程共享&#xff09; 3.3 本地方法栈&#xff08;线程私有&#xff09; 3.4 程序计数器&#xff08;线程私有&#xff09; 3.5 方法区&#xff08;线程共享&#xff09; 4.JVM 类加载 ① 类…...

编程日记 2024/3/10 12:51:02

kibana配置 dashbord，做可视化展示

一、环境介绍 这里我使用的kibana版本为7.17版本。 语言选择为中文。 需要已经有es&#xff0c;已经有kibana&#xff0c;并且都能正常访问。 二、背景介绍 kibana的可视化界面&#xff0c;可以配置很多监控统计界面。非常方便&#xff0c;做数据的可视化展示。 这篇文章&…...

编程日记 2024/3/10 12:46:59

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/9/11 16:48:32

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/9/11 18:17:34

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/8/2 6:48:59

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/8/27 16:07:23

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/7/18 2:39:54

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/9/3 15:40:48

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2025/9/3 23:35:33

Python 高效图像帧提取与视频编码：实战指南

Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...

编程新知 2025/8/31 18:02:53

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

编程新知 2025/9/9 10:04:42

工厂方法模式和抽象工厂方法模式的battle

1.案例直接上手 在这个案例里面&#xff0c;我们会实现这个普通的工厂方法&#xff0c;并且对比这个普通工厂方法和我们直接创建对象的差别在哪里&#xff0c;为什么需要一个工厂&#xff1a; 下面的这个是我们的这个案例里面涉及到的接口和对应的实现类&#xff1a; 两个发…...

编程新知 2025/9/7 8:42:42