html5cssjs代码 005 小学数学四则运算练习

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来实现这些功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/741078.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

抗生素净化提纯大孔吸附树脂

一、介绍 ADS-800级吸附树脂 ADS-800是一款功能强大的&#xff0c;大孔&#xff0c;湿润的球形交联聚合物吸附型树脂。 ADS-800 具有优良的物理特性&#xff0c;化学和热稳定性。它的特定的多孔性和其表面积使的本产品适合于分离技术的应用。 ADS-800 是为了流程工业中的专业…

2024第八届通信与未来互联网国际会议(ICCFI 2024)即将召开!

2024年第8届通信与未来互联网国际会议&#xff08;ICCFI 2024&#xff09; 日本鹿儿岛 | 2024年7月19-21日 ICCFI 2024 | Communications and Future Internet | Kagoshima-shi, Japanhttps://www.iccfi.org/ 主办单位&#xff1a; ◆ 出版 ▪ 会议论文集 投稿论文将经过严…

honle电源维修UV电源控制器维修EVG EPS60

好乐UV电源控制器维修&#xff1b;honle控制器维修&#xff1b;UV电源维修MUC-Steuermodul 2 LΛmpen D-82166 主要维修型号&#xff1a; EVG EPS 60/120、EVG EPS 100、EVG EPS200、EVG EPS 220、EVG EPS 340、EVG EPS40C-HMI、EVG EPS60 HONLE好乐uv电源维修故障包括&#…

DARTS: DIFFERENTIABLE ARCHITECTURE SEARCH

DARTS&#xff1a;可微架构搜索 论文链接&#xff1a;https://arxiv.org/abs/1806.09055 项目链接&#xff1a;https://github.com/quark0/darts ABSTRACT 本文通过以可微分的方式表述任务&#xff0c;解决了架构搜索的可扩展性挑战。与在离散和不可微搜索空间上应用进化或强…

Linux fork函数详解

文章目录 1 基本介绍2 fork实例2.1 多个fork返回值2.2 C语言 fork与输出2.3 fork &#x1f4a3; 1 基本介绍 #include <sys/types.h> #include <unistd.h>pid_t fork(void)描述 fork用于创建一个子进程&#xff0c;它与父进程的唯一区别在于其PID和PPID&#xff0…

频繁Full GC如何排查

频繁的Full GC可能会影响应用程序的性能和稳定性&#xff0c;因此需要进行排查和解决。下面是一些可能的排查方法&#xff1a; GC日志分析&#xff1a; 启用GC日志&#xff0c;并分析GC日志以了解Full GC的触发情况和频率。GC日志会提供有关GC事件的详细信息&#xff0c;包括GC…

2024年PHP伪协议详解

【2024年PHP伪协议详解】 嘿&#xff0c;亲爱的编程新手们&#xff01;今天我们要一起探索PHP伪协议的奇妙世界。想象一下&#xff0c;PHP伪协议就像是一个神秘的传送门&#xff0c;能让我们在PHP的海洋中畅游无阻。准备好了吗&#xff1f;让我们开始这段冒险之旅吧&#xff01…

C语言--sprintf()函数的用法

一.sprintf()语法 sprintf&#xff08;&#xff09; 是一个 C 语言中的函数&#xff0c;用于将格式化的数据写入一个字符串中。它的用法与 printf() 函数相似&#xff0c;printf&#xff08;&#xff09;函数是将内容输出到屏幕上&#xff0c;而sprintf()函数是将格式化的内容输…

蓝桥杯java组 测试次数

题目描述 x星球的居民脾气不太好&#xff0c;但好在他们生气的时候唯一的异常举动是&#xff1a;摔手机。 各大厂商也就纷纷推出各种耐摔型手机。x星球的质监局规定了手机必须经过耐摔测试&#xff0c;并且评定出一个耐摔指数来&#xff0c;之后才允许上市流通。 x星球有很多…

设计模式一 ---单例设计模式(动力节点,JavaSE基础)

设计模式 1.什么是设计模式&#xff1f; 2.设计模式的分类 单例设计模式就是GoF模式中的一种。 3.GoF设计模式的分类&#xff1a; 单例设计模式&#xff1a; 顾名思义&#xff1a;单个实例的设计模式&#xff01;

Arco 部署项目后部分样式未生效

文章目录 问题分析 问题 在更改 arco 的原始样式后&#xff0c;发现部分样式并未被更改 分析 如下所示&#xff0c;通过元素查看器可以看到原生的绑定的 class 类名和样式 而我将整个的设置了的样式做了替换 :deep(.arco-menu-light.arco-menu-horizontal .arco-menu-ite…

【力扣精选算法100道】——二进制求和

LCR 002. 二进制求和 - 力扣&#xff08;LeetCode&#xff09; 目录 &#x1f388;了解题意 &#x1f388;算法分析 &#x1f6a9;cur1>0 &#x1f6a9;cur2>0 &#x1f6a9;t &#x1f388;实现代码 &#x1f388;了解题意 遵循二进制加法法则&#xff0c;如果俩…

跨阻放大器(TIA)的输入输出阻抗的定义、分析和影响因素

跨阻放大器&#xff08;TIA&#xff09;的输入输出阻抗的定义、分析和影响因素 跨阻放大器&#xff08;Transimpedance Amplifier&#xff0c;简称TIA&#xff09;是一种常用于将电流信号转换为电压信号的放大器。在TIA电路中&#xff0c;输入阻抗是指输入端对电流信号的响应能…

接入DDoS高防后如何设置源站保护

业务接入DDoS高防后&#xff0c;您应当尽量避免源站IP暴露&#xff0c;以防止攻击者绕过DDoS高防直接攻击源站。如果源站IP有暴露风险&#xff0c;建议您设置源站保护&#xff0c;例如只允许DDoS高防回源IP的入方向流量&#xff0c;提升业务可用性。本文九河云介绍不同网络架构…

48. 【Linux教程】yum 软件包管理

本小节介绍如何在 Linux 系统中使用 yum 命令软件管理。 1.yum 简介 yum 是 Red Hat 软件包管理器&#xff0c;它能够查询有关可用软件包的信息&#xff0c;从存储库获取软件包&#xff0c;安装和卸载软件包&#xff0c;以及将整个系统更新到最新的可用版本。yum 在更新&#…

酷开会员 | 和好朋友一起玩酷开系统体感游戏

春天已经到来&#xff0c;闲暇时间做些什么好呢&#xff1f;那就玩会游戏吧&#xff01;打开酷开系统&#xff0c;在体感游戏中&#xff0c;寻找一款自己喜欢的运动&#xff0c;和家人一起运动起来吧&#xff01; 酷开系统是一款非常贴心、全面的智能电视操作系统。它拥有丰富…

介绍一下c++中的多态

c中实现多态分为两种方式&#xff0c;分别是静态多态&#xff08;也叫编译时多态&#xff09;&#xff0c;和动态多态(也叫运行时多态) 静态多态: 是在编译时就确定了函数的类型和会调用哪个函数&#xff0c;这种方式叫做静态连接或者早绑定&#xff0c;静态多态主要实现手段…

springboot/ssm航班进出港管理系统Java航班信息记录管理系统web

springboot/ssm航班进出港管理系统Java航班信息记录管理系统web 基于springboot(可改ssm)vue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1…

Math类中的方法总结

Math.min(int a, int b) 或 Math.min(double a, double b)&#xff1a;返回两个值中的最小值。 Math.abs(int a) 或 Math.abs(double a)&#xff1a;返回值的绝对值。 Math.pow(double a, double b)&#xff1a;返回a的b次幂的结果。 Math.sqrt(double a)&#xff1a;返回a的平…

veeam备份基础

veeam的安装 将文件动态连接文件复制到veeam的安装目录中&#xff0c;替换掉新的文件 重新启动服务 为veeam添加证书 为veeam添加存储 其他 第一次完整备份时间会比较久 备份预览&#xff0c;transferred和processing date的区别 transferred后面数据为压缩比