HTML+JS+CSS计算练习
可填 题目数量 数字范围 计算符号
题目做完后会弹窗提示正确率、用时
效果图 源代码在图片后面
<!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>点赞❤️ 关注 🖲 收藏 ⭐️
相关文章：
HTML+JS+CSS计算练习
可填 题目数量 数字范围 计算符号 题目做完后会弹窗提示正确率、用时 效果图 源代码在图片后面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevic…...
设计模式使用场景实现示例及优缺点（行为型模式——责任链模式）
在一个遥远的森林深处，有一个和谐的动物王国。这个王国里的动物们都有各自的职责，大家相互合作，共同维护着森林的和平与繁荣。 一天，森林里来了一只迷路的小兔子，她焦急地四处张望，不知道该怎么办。于是&am…...
CSS-1_0 CSS和文档流
文章目录 CSS和文档流如何证明这个流的存在呢？流和display番外：inline-block 碎碎念 CSS和文档流 首先什么叫流呢？ 通常来说，我们最终看到的网页是HTML文档中定义的各个元素挨个输出的结果，这种一个接一个输出的方式…...
小程序图片下载保存方法，图片源文件保存！
引言 现在很多时候我们在观看到小程序中的图片的时候，想保存图片的原文件格式的话，很多小程序是禁止保存的，即使是让保存的话，很多小程序也会限制不让保存原文件，只让保存一些分辨率很低的，非常模糊的图片…...
新书速览|深入理解Hive:从基础到高阶:视频教学版
《深入理解Hive：从基础到高阶：视频教学版》 本书内容 《深入理解Hive:从基础到高阶:视频教学版》采用“理论实战”的形式编写，通过大量的实例，结合作者多年一线开发实战经验，全面地介绍Hive的使用方法。《深入理解Hiv…...
钡铼Profinet、EtherCAT、Modbus、MQTT、Ethernet/IP、OPC UA分布式IO系统BL20X系列耦合器
BL20X系列耦合器是钡铼技术开发的一款用于分布式I/O系统的设备，专为工业环境下的高速数据传输和远程设备控制而设计，支持多种工业以太网协议，包括Profinet、EtherCAT、Modbus、MQTT、Ethernet/IP和OPC UA等。如果您正在考虑部署BL20X系列耦合…...
Git分支合并以及分支部分合并 提交记录合并
Git分支合并,以及分支部分合并,提交记录合并 最近工作中用到git分支合并的场景,记录一下. 分支整体合并,合并所有记录 仅合并分支部分代码...
IDEA关联数据库
《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试（Debug） 第七章 …...
【Leetcode】14. 最长公共前缀
leetcode原地址：https://leetcode.cn/problems/longest-common-prefix 描述 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀，返回空字符串 “”。 示例 1： 输入：strs [“flower”,“flow”,“flight”…...
【BUG】已解决：zipfile.BadZipFile: File is not a zip file
已解决：zipfile.BadZipFile: File is not a zip file 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页，我是博主英杰，211科班出身，就职于医疗科技公司，热衷分享知识，武汉城市开发…...
小白新手搭建个人网盘
小白新手搭建个人网盘 序云服务器ECS重置密码远程连接ECS实例 安装OwnCloud安装Apache服务PHP运行环境NAS挂载挂载验证操作体验 序 阿里云文件存储NAS（Apsara File Storage NAS）是一个可大规模共享访问，弹性扩展的分布式文件系统。本文主要是…...
NineData全面支持PostgreSQL可视化表结构设计
“PostgreSQL 是最像 Oracle 的开源关系型数据库“，也正因为如此，很多企业都青睐 PostgreSQL，拿它当成 Oracle 的替代品。所以毫无疑问，目前 PostgreSQL 在企业中非常常见。 对于直接接触 PostgreSQL 的开发人员而言，…...
从系统层面认识Linux及mysql中的多表查询
为什么计算机起始时间是1970年1月1日 为什么计算机起始时间是1970年1月1日-CSDN博客https://blog.csdn.net/csdn_kou/article/details/81535452 date "%Y-%m-%d %H:%M:%S" 查看日期 sudo ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 在数据层面 CPU不…...
PCB（印制电路板）制造涉及的常规设备
印制电路板（PCB）的制造涉及多种设备和工艺。从设计、制作原型到批量生产，每个阶段都需要不同的专业设备。以下是一些在PCB制造过程中常见的设备： 1. 计算机辅助设计（CAD）软件： - 用于设计PC…...
《Windows API每日一练》10.3 公用对话框
Windows最初发行时的主要目标之一就是提倡一种标准化的用户界面。对于公用菜单 项来说，这一目标实现得很快。几乎所有的软件制造商都采用了Alt-File-Open组合来打开 文件。但是，真正用来打开文件的对话框却经常很不一样。 从Windows 3.1开始，…...
C++中的引用
在C中，我们要学习一个新的概念，叫做引用。引用不是对象，它只是给变量取一个别名。就好比，我们每个人总会右一下外号，或者是小名。当朋友或者家长不管是直接叫你的名字，还是叫你的小名，你都会答应…...
【自学安全防御】三、企业双机热备和带宽管理的综合实验
实验拓扑： 实验任务： 12，对现有网络进行改造升级，将当个防火墙组网改成双机热备的组网形式，做负载分担模式，游客区和DMZ区走FW3，生产区和办公区的流量走FW1 13，办公区上网用户限制流…...
无极与有极电容的区别
无极性电容与有极性电容：差异与应用探索 在电子元件的广阔世界里，电容器无疑是不可或缺的一部分。它们以储存电荷和调节电路中的电压与电流而闻名。然而，电容器并非一概而论，其中最为显著的区别之一就是无极性电容与有极性电容。…...
入坑树莓派（2）——树莓派4B与手机蓝牙通信
入坑树莓派（2）——树莓派4B与手机蓝牙通信 1、引言 在入坑树莓派（1）中已经搞掂了可视化问题。现在继续开展下一步，尝试与手机通信，一开始是想弄wifi连接的，但发现基于wifi的APP比较难弄，为了降低开发的难度，又因为树莓派板子自带蓝牙模块，所以直接选用蓝牙连接手机…...
RocketMQ单结点安装/Dashboard安装
目录 1.安装NameServer 2.安装Broker 3.使用自带工具测试数据发送 4.使用DashBoard进行查看 5.关闭相关设备 前置条件：两台虚拟机CentOS Linux release 7.5.1804(ps:当然也可以都部署在一台机器上) RocketMq属于天生集群。需要同时启动nameServer和Broker进行…...
【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第二篇 Linux系统编程篇-第三十四章 进程基础
i.MX8MM处理器采用了先进的14LPCFinFET工艺，提供更快的速度和更高的电源效率;四核Cortex-A53，单核Cortex-M4，多达五个内核 ，主频高达1.8GHz，2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…...
使用LVS+NGinx+Netty实现数据接入
数据接入 链接参考文档 LVSKeepalived项目 车辆数据上收，TBox通过TCP协议连接到TSP平台 建立连接后进行数据上传。也可借由该连接实现远程控制等操作。 通过搭建 LV—NGinx—Netty实现高并发数据接入 LVS：四层负载均衡（位于内核层&#x…...
云手机结合自主ADB命令接口 提升海外营销效率
现在，跨境电商直播已经成为在线零售的重要渠道，在大环境下，确保直播应用的稳定性和用户体验至关重要。 云手机支持自主ADB命令接口，为电商直播营销提供了技术支持，使得应用开发、测试、优化和运维更加高效。 什么是A…...
【计算机视觉前沿研究 热点 顶会】CVPR 2024中与域适应、分布外目标检测相关的论文
测试时间线性分布外检测 分布外（ OOD）检测旨在通过在输入样本显著偏离训练分布（分布中）时触发警报来解决神经网络的过度置信度预测，这表明输出可能不可靠。当前的 OOD 检测方法探索各种线索来识别 OOD 数据࿰…...
首次由国产8K摄像机服务巴黎奥运会8K公用信号
法国巴黎时间16日上午，中央广播电视总台“中国红”8K转播车穿越大半个地球，抵达法兰西体育场，顺利完成与奥林匹克转播公司(OBS)的交接。 （1）“中国红”8K转播车 作为适合户外露天项目的“移动制作域”，“…...
idea怎么配置gradle多个版本
1.背景 gradle版本很多,而且很多时候版本是不兼容的,我们希望拉取下来的代码就包含已经配置好的版本,而不是去配置本机的gradle版本..... 意思就是要实现项目A可以用6.X版本 项目B可以使用7.X版本 项目C可以用9.X版本..... 2.配置方式 步骤一:项目根路径下保留一个文件夹…...
SpringCloudAlibaba-Seata2.0.0与Nacos2.2.1
一、下载 ## 下载seata wget https://github.com/apache/incubator-seata/releases/download/v2.0.0/seata-server-2.0.0.tar.gz## 解压 tar zxvf seata-server-2.0.0.tar.gz二、执行sql文件 ## 取出sql文件执行 cd /seata/script/server/db/mysql ## 找个mysql数据库执行三、…...
【编程语言】C++和C的异同点
文章目录 相同点不同点cin和scanf()结构体struct指针：NULL、nullptr、void* 有一段时间没有发博客了，从笔记里摘录一些发两篇。 相同点 C有很多从C继承过来的东西，因此C书(《C Primer》、《C Primer Plus》)中有一些基础的东西讲的并没有C书…...
【日常记录】【插件】excel.js导出的时候给单元格设置下拉选择、数据校验等
文章目录 1. 代码基本结构2. 导出的excel 某单元格的值设置为下拉选择3. 如何把下拉选择项设置为动态4. 单元格设置校验、提示5. 在WPS上的设置 1. 代码基本结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><…...
分布式 I/O 系统Modbus TCP 耦合器BL200
BL200 耦合器是一个数据采集和控制系统，基于强大的 32 位微处理器设计，采用 Linux 操作系统，可以快速接入现场 PLC、SCADA 以及 ERP 系统， 内置逻辑控制、边缘计算应用，支持标准 Modbus TCP 服务器通讯，以太…...
wordpress复制数据库结构/互联网营销培训
Ubuntu环境下的“批处理”长时间生活在CLI中，“批处理”绝对能简化不少工作。在Windows环境中，建立一个后缀名为.bat的文件，输入需要的指令，保存之后执行即可，十分方便。其实在Ubuntu中也有类似的功能，而且…...
吕梁网站建设/小果seo实战培训课程
实操过程 源数据库服务器（192.168.1.101）备份服务器(192.168.1.102)环境centos 7.4 mysql5.7 centos 7.4 数据库实例3306/安装备份工具Xtrabackup/安装网络限速工具 yum install pv #如果不做网络限速的话，可以不用安装 /ssh免密登陆 ssh…...
廊坊做网站电话/seo关键词优化外包
问题描述：父组件传如lesser和larger两个参数，并且是ajax从服务器获取的。子组件定义created阶段输出lesser和larger。但larger为空。改成延迟输出则正确。问题来源：https://segmentfault.com/q/1010000008912491提问者的主要问题是没有搞清楚…...
在制作网站前 不需要急于做的工作是/优化网站广告优化
我们知道，很多程序都直接文件拖放。例如常见的Excel，Word等等。如果要为我们自己的应用程序添加文件拖放到支持，那么可以按照如下的一些步骤完成 1. 设置窗体的allowdrop属性为true 2. 编写两个事件：DragEnter和DragDrop 以下是我…...
怎么在b2b网站上发信息让百度收录怎么做/软件公司
本人出自：http://www.myexception.cn/android/558502.html listview滑动最后停止，没有执行onScrollStateChanged方法，最后停在onScroll，为什么啊？ 场景是这样的：滑动列表快到最底部时，松开触摸…...
网站建设外包被骗/百度推广怎么开户
jQuery实现倒计时效果-杨秀徐 本实例效果：剩余368天22小时39分57秒结束 代码简单易懂，适用各种倒计时； http://www.cnblogs.com/sntetwt/category/287335.html 12345678910111213141516171819202122232425262728293031323334353637383940414…...