HTML+JS+CSS计算练习

可填 题目数量 数字范围 计算符号

题目做完后会弹窗提示正确率、用时

效果图     源代码在图片后面 

058b109fbdb342a9becb1604308f257f.jpg

6885b9c369754487b466d779c801ef6f.jpg

8e474bd5b2f0493abd8844dd05e5d09e.jpg

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数学计算练习</title><style>body {font-family: Arial, sans-serif;background-color: #f2f2f2;}.container {max-width: 400px;margin: 50px auto;background-color: #fff;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h2 {text-align: center;margin-bottom: 20px;color: #ff4646;}input, select, button {display: block;width: 100%;margin-bottom: 10px;padding: 10px;border: none;border-radius: 5px;}button {background-color: #ff4646;color: #fff;cursor: pointer;}button:hover {background-color: #ff1f1f;}</style>
</head>
<body><div class="container"><h2>数学计算练习</h2><input type="number" id="numOfQuestions" placeholder="输入题目数量"><input type="number" id="minNumber" placeholder="输入数字范围最小值"><input type="number" id="maxNumber" placeholder="输入数字范围最大值"><select id="operation"><option value="add">加法</option><option value="subtract">减法</option><option value="multiply">乘法</option><option value="divide">除法</option></select><button onclick="startQuiz()">开始练习</button></div><script>function startQuiz() {var numOfQuestions = document.getElementById('numOfQuestions').value;var minNumber = document.getElementById('minNumber').value;var maxNumber = document.getElementById('maxNumber').value;var operation = document.getElementById('operation').value;var correctAnswers = 0;var startTime = new Date().getTime();for (var i = 0; i < numOfQuestions; i++) {var num1 = Math.floor(Math.random() * (maxNumber - minNumber + 1)) + parseInt(minNumber);var num2 = Math.floor(Math.random() * (maxNumber - minNumber + 1)) + parseInt(minNumber);var question, answer;switch (operation) {case 'add':question = num1 + ' + ' + num2;answer = num1 + num2;break;case 'subtract':question = num1 + ' - ' + num2;answer = num1 - num2;break;case 'multiply':question = num1 + ' * ' + num2;answer = num1 * num2;break;case 'divide':if (num2 === 0) {continue;}question = num1 + ' ÷ ' + num2;answer = num1 / num2;break;}var userAnswer = prompt('第' + (i+1) + '题: ' + question + ' = ?');if (userAnswer && parseFloat(userAnswer) === answer) {correctAnswers++;}}var endTime = new Date().getTime();var totalTime = (endTime - startTime) / 1000;var accuracy = (correctAnswers / numOfQuestions) * 100;alert('练习结束,正确率:' + accuracy.toFixed(2) + '%,用时:' + totalTime.toFixed(2) + '秒');}</script>
</body>
</html>

点赞❤️ 关注 🖲 收藏 ⭐️

 

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【深度学习】inpaint图像中的alpha混合图的边缘处理

比如原图是&#xff1a; 红圈内就是文字水印&#xff0c;经过inpaint后得到图和原图混合&#xff0c;如何处理边界呢&#xff0c;这个代码可以干这事&#xff1a; 越是中心就直接用inpaint图&#xff0c;否则就用原图&#xff0c;这样进行alpha混合。 import numpy as np i…

js reduce 的别样用法

let mergedItems list.reduce((accumulator, currentItem) > {let existingItem accumulator.find((item) > item.manObject_name currentItem.manObject_name);if (existingItem) {existingItem.laborCostHand currentItem.laborCostHand; //劳务费existingItem.wor…

windows下使用make编译C/C++程序 gcc编译 MinGW编译器

文章目录 1、概要2、编译环境搭建3、创建工程目录结构4、 编写程序4.1 编写头文件4.2 编写源文件 5、编写makefile及相关文件5.1 编写清理编译生成文件的批处理文件&#xff0c;供makefile调用5.2 编写makefile文件 6、编译工程6.1 打开命令行6.2 使用make命令编译程序6.3 编译…

effective c++学习笔记1

Effective C 来源于阿西拜编程 《Effective C》2023&#xff08;上部完整版&#xff09; C进阶看这个_哔哩哔哩_bilibili 2024年7月15日 第一章 第1条 第7章&#xff0c;学完比较能够看懂&#xff0c;一般公司不推荐写模板&#xff08;调试麻烦&#xff0c;维护成本高&…

Anaconda创建新的环境一直报错

Anaconda创建新的环境一直报错 报错信息如下&#xff1a; CondaHTTPError: HTTP 404 NOT FOUND for url <https://pypi.tuna.tsinghua.edu.cn/simple/noarch/repodata.json> Elapsed: 00:01.358961The remote server could not find the noarch directory for the requ…

你的字典还是想改就改?试试Python MappingProxyType,让你的数据只读到底!

目录 1、初识MappingProxyType &#x1f50d; 1.1 MappingProxyType简介 1.2 不可变映射的优势 2、创建你的第一个MappingProxyType实例 &#x1f389; 2.1 使用dict创建MappingProxyType 2.2 获取MappingProxyType属性 3、探索MappingProxyType的方法和属性 &#x1f6…

HarmonyOS NEXT零基础入门到实战-第一部分

构建节页面思路&#xff1a; 1、排版 (分析布局) 2、内容&#xff08;基础组件&#xff09; 3、美化&#xff08;属性方法&#xff09; 设计资源-svg图标 界面中展示图标 ->可以使用svg图标&#xff08;任意放大缩小不失真&#xff0c;可以改颜色&#xff09; 使用方式&a…

Linux内核分析:VFS和文件系统

文章目录 写在前面下载链接思维导图一些问题使用slab进行分配的优势和意义如何理解这段话&#xff1a;Linux 将新的文件系统通过一个称为“挂装”或“挂上”的操作将其挂装到某个目录上&#xff0c;从而让不同的文件系统结合成为一个整体。Linux 操作系统的一个重要特点是它支持…

apisix安装

安装依赖 如果当前系统没有安装 OpenResty&#xff0c;请使用以下命令来安装 OpenResty 和 APISIX 仓库&#xff1a; sudo yum install -y https://repos.apiseven.com/packages/centos/apache-apisix-repo-1.0-1.noarch.rpm如果已安装 OpenResty 的官方 RPM 仓库&#xff0c…

Clonezilla 备份还原过程推送日志到 syslog

Clonezilla 备份、还原过程中&#xff0c;系统的运行日志只能显示到客户端显示器上&#xff0c;如果出现错误&#xff0c;无法在服务端查询到对应的日志&#xff0c;一是故障判断不太方便&#xff1b;另一方面&#xff0c;实现日志推送&#xff0c;也可以将 Clonezilla 运行进度…

配置和保护SSH

使用SSH访问远程命令行 描述Secure Shell SSH&#xff08;Secure Shell&#xff09; 是一种网络协议&#xff0c;用于在不安全的网络上安全地进行系统管理和数据传输。它最初由 Tatu Ylnen 于1995年设计&#xff0c;并成为保护网络服务免受攻击的标准。SSH提供了多种功能&…

正则表达式(Ⅳ)——零宽断言

介绍 以……为开头/以……为结尾 正向表示匹配白名单 先行表示需要写在想要筛选的表达式之后 负向表示匹配黑名单 后行表示需要写在想要筛选的表达式之前 正向先行断言 这段比较复杂&#xff0c;我们拆开来看 \d(?PM) \d表示匹配数字&#xff0c;而且是匹配单个数字 表示…

【C++】C++ 职工信息管理系统(源码)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

EXCEL的自定义功能

一、Excel文件获取 OFFICE中导入文本文件&#xff0c;CSV&#xff08;分隔符通常是逗号&#xff09;和TXT&#xff08;分隔符通常是Tab键&#xff0c;可以用记事本打开查看分隔符&#xff09;进入单元格&#xff0c;数据——获取外部数据——自文本。 WPS中数据——获取数据——…

Java学习高级四

JDK8开始&#xff0c;接口新增了三种形式的方法 接口的多继承 内部类 成员内部类 静态内部类 局部内部类 匿名内部类 import javax.swing.*; import java.awt.event.ActionEvent;public class Test {public static void main(String[] args) {// 扩展 内部类在开发中的真实使用…

408一战130+|暑假四门课复习经验+资料分享

刚好我有点发言权 408想要考高分&#xff0c;其实很简单&#xff0c;学会抓住主要矛盾&#xff01; 是吗是主要矛盾&#xff0c;大家都知道&#xff0c;408学科四门课&#xff0c;分别是数据结构&#xff0c;计算机组成原理&#xff0c;操作系统&#xff0c;计算机网络。那么4…

Python进阶(4)--正则表达式

正则表达式 在Python中&#xff0c;正则表达式&#xff08;Regular Expression&#xff0c;简称Regex&#xff09;是一种强大的文本处理工具&#xff0c;它允许你使用一种特殊的语法来匹配、查找、替换字符串中的文本。 在这之前&#xff0c;还记得之前我们是通过什么方法分割…

【Python实战因果推断】42_合成控制2

目录 Matrix Representation Synthetic Control as Horizontal Regression Matrix Representation 在上文中&#xff0c;我向大家展示了一个用矩阵表示面板数据的图像&#xff0c;其中一个维度是时间段&#xff0c;另一个维度表示单位。合成控制明确使用了该矩阵&#xff0c;…

SciPy,一个超级强大的 Python 库

大家好&#xff01;我是爱摸鱼的小鸿&#xff0c;关注我&#xff0c;收看每期的编程干货。 一个简单的库&#xff0c;也许能够开启我们的智慧之门&#xff0c; 一个普通的方法&#xff0c;也许能在危急时刻挽救我们于水深火热&#xff0c; 一个新颖的思维方式&#xff0c;也许能…

React 从入门到实战 一一开发环境基础搭建(小白篇)

React 从入门到实战一一开发环境基础搭建&#xff08;小白篇&#xff09; React 介绍什么是 react &#xff1f;react 主要功能react 框架特点 开发工具渲染测试 React 介绍 最近两年&#xff0c;react 也愈来愈火热&#xff0c;想要在里面分一杯羹&#xff0c;那肯定逃不过 r…