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进行…...
)
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...