【加强版】小学数学出题,加减乘除混合运算,支持自定义数字,一键打印

本文主要是介绍【加强版】小学数学出题,加减乘除混合运算,支持自定义数字,一键打印,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在线预览:在线HTML代码预览和运行工具 - UU在线工具   复制下面代码后到该地址预览即可

 注意:在线预览不能打印。如需打印,在电脑本地上新建文本文档,粘贴代码后保存,然后把文件后缀改为.html运行,出题点击打印就可以了


新增功能:
1、支持加减乘除运算混合多选
2、支持自定义数字运算个数
3、支持自定义出题数量
4、支持一键打印成pdf
5、小学数学没有负数,保证结果不出现负数
6、出题分列展示、新增答案下划线
7、界面美化

<!DOCTYPE html>
<html lang="zh">
<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: #f4f4f4;margin: 0;display: block;flex-direction: column;align-items: center;justify-content: center;}#options {display: block;margin: 20px auto;background-color: #fff;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);padding: 20px;box-sizing: border-box;width: 500px;line-height: 35px;}label {margin-right: 10px;margin-bottom: 10px;font-size: 16px;}button {padding: 5px;background-color: #4caf50;color: #fff;border: none;border-radius: 5px;cursor: pointer;}#questions {display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 20px;}.question {width: 48%;box-sizing: border-box;padding: 10px;background-color: #fff;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);margin-bottom: 10px;font-size: 18px;}.answer {display: none;font-size: 16px;}#printHeader {display: none;margin-bottom: 20px;}@media print {#printHeader {display: block;text-align: center;margin-bottom: 30px; }body {margin: 30px; }.column {display: inline-block;width: 48%;box-sizing: border-box;margin-bottom: 20px;break-before: auto; }.question {page-break-inside: avoid; }@page {size: A4;margin: 25mm 10mm 25mm 10mm;}.question:nth-child(n+21) {display: none;}}div#printHeader {text-align: center;margin-bottom: 15px;
}</style>
</head>
<body><div class="hd1" style="text-align:center;font-size:35px;background-color: #4CAF50;min-height: 100px;padding-top: 50px;"><font>小学生数学题生成器</font></div><div id="options">运算符号:<label><input type="checkbox" id="additionCheckbox" checked="checked"> 加法</label><label><input type="checkbox" id="subtractionCheckbox"> 减法</label><label><input type="checkbox" id="multiplicationCheckbox"> 乘法</label><label><input type="checkbox" id="divisionCheckbox"> 除法</label><br><label>数字个数:<input type="number" id="numOfDigits" value="2" min="1" style="width: 50px;"></label> <br><label>允许小数:<input type="checkbox" id="allowDecimal"></label><br><label>数字范围:<label><input type="number" id="minRange" value="1" min="1" style="width: 50px;"></label>-<label><input type="number" id="maxRange" value="100" min="1" style="width: 50px;"></label></label><br><label>出题数量:<input type="number" id="numOfQuestions" value="30" min="1" style="width: 50px;"></label><br><button onclick="generateQuestions()">生成题目</button><button onclick="printQuestions()">一键打印</button><button onclick="toggleAnswers()">显示/隐藏答案</button></div><div id="questions"></div><script>function generateQuestions() {const addition = document.getElementById("additionCheckbox").checked;const subtraction = document.getElementById("subtractionCheckbox").checked;const multiplication = document.getElementById("multiplicationCheckbox").checked;const division = document.getElementById("divisionCheckbox").checked;const numOfDigits = document.getElementById("numOfDigits").value;const allowDecimal = document.getElementById("allowDecimal").checked;const minRange = parseInt(document.getElementById("minRange").value);const maxRange = parseInt(document.getElementById("maxRange").value);const numOfQuestions = document.getElementById("numOfQuestions").value;const questionsContainer = document.getElementById("questions");questionsContainer.innerHTML = "";for (let i = 0; i < numOfQuestions; i++) {let validQuestion = false;let questionText, answerText;while (!validQuestion) {const operators = getRandomOperators(addition, subtraction, multiplication, division, numOfDigits);const numbers = generateNumbers(numOfDigits, allowDecimal, minRange, maxRange);questionText = generateQuestionText(numbers, operators, allowDecimal);answerText = calculateAnswer(numbers, operators, allowDecimal).toFixed(allowDecimal ? 2 : 0);if (!containsNegativeNumber(questionText) && answerText >= 0) {validQuestion = true;}}const questionDiv = document.createElement("div");questionDiv.classList.add("question");questionDiv.innerHTML = `<span>${questionText}</span><span class="answer">${parseFloat(answerText)}</.toFixed(2)}</span>`;questionsContainer.appendChild(questionDiv);}}function getRandomOperators(addition, subtraction, multiplication, division, numOfDigits) {const availableOperators = [];if (addition) availableOperators.push('+');if (subtraction) availableOperators.push('-');if (multiplication && numOfDigits >= 2) availableOperators.push('*');if (division && numOfDigits >= 2) availableOperators.push('/');const selectedOperators = [];for (let i = 0; i < numOfDigits - 1; i++) {const randomOperator = availableOperators[Math.floor(Math.random() * availableOperators.length)];selectedOperators.push(randomOperator);}return selectedOperators;}function generateQuestionText(numbers, operators, allowDecimal) {let questionText = numbers[0].toString();for (let i = 0; i < operators.length; i++) {const operator = operators[i];const num = allowDecimal ? parseFloat(numbers[i + 1]).toFixed(2) : parseInt(numbers[i + 1]);questionText += ` ${operator.replace('*', 'x').replace('/', '÷')} ${num}`;}questionText += ' =';return questionText;}function generateNumbers(numOfDigits, allowDecimal, minRange, maxRange) {const randomNumber = () => allowDecimal ? (Math.random() * (maxRange - minRange) + minRange).toFixed(2): Math.floor(Math.random() * (maxRange - minRange + 1)) + minRange;const numbers = [];for (let i = 0; i < numOfDigits; i++) {numbers.push(randomNumber());}return numbers;}function calculateAnswer(numbers, operators, allowDecimal) {const calculateMulDiv = (nums, ops) => {for (let i = 0; i < ops.length; i++) {if (ops[i] === '*' || ops[i] === '/') {const result = ops[i] === '*' ? nums[i] * nums[i + 1] : nums[i] / nums[i + 1];nums.splice(i, 2, result);ops.splice(i, 1);i--;}}};const nums = numbers.map(num => parseFloat(num));const ops = operators.map(op => op);calculateMulDiv(nums, ops);let result = nums[0];for (let i = 0; i < ops.length; i++) {const num = nums[i + 1];const operator = ops[i];switch (operator) {case '+':result += num;break;case '-':result -= num;break;default:break;}}return allowDecimal? parseFloat(result.toFixed(2)): parseInt(result);}function containsNegativeNumber(questionText) {const parts = questionText.split(' ');for (let i = 0; i < parts.length; i++) {if (parseFloat(parts[i]) < 0) {return true;}}return false;}function printQuestions() {const printWindow = window.open('', '_blank');const printContent = document.getElementById("questions").innerHTML;printWindow.document.write(`<html lang="zh"><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;margin: 30px; }.column {display: inline-block;width: 48%;box-sizing: border-box;margin-bottom: 20px;}.question {padding: 10px;background-color: #fff;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);margin-bottom: 10px;font-size: 18px;}.answer {display: none;font-size: 16px;}</style></head><body><div id="printHeader" style="text-align: center;margin-bottom: 20px;"><div>姓名:_________ 日期:____月____日 时间:________ 答对:_______题</div></div><div class="column" id="column1"></div><div class="column" id="column2"></div></body></html>`);const column1 = printWindow.document.getElementById("column1");const column2 = printWindow.document.getElementById("column2");const questions = document.querySelectorAll('.question');let countColumn1 = 0;let countColumn2 = 0;questions.forEach((question, index) => {const column = index % 2 === 0 ? column1 : column2;const clonedQuestion = question.cloneNode(true);// Replace answer content with formatted answerconst answerElement = clonedQuestion.querySelector('.answer');const answerText = answerElement.textContent;answerElement.textContent = parseFloat(answerText).toFixed(2);column.appendChild(clonedQuestion);if (index % 2 === 0) {countColumn1++;} else {countColumn2++;}});printWindow.document.close();printWindow.print();}function toggleAnswers() {const answers = document.querySelectorAll('.answer');answers.forEach(answer => {answer.style.display = (answer.style.display === 'none' || answer.style.display === '') ? 'inline' : 'none';});}</script>
</body>
</html>

这篇关于【加强版】小学数学出题,加减乘除混合运算,支持自定义数字,一键打印的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/616542

相关文章

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现

使用PyTorch实现手写数字识别功能

《使用PyTorch实现手写数字识别功能》在人工智能的世界里,计算机视觉是最具魅力的领域之一,通过PyTorch这一强大的深度学习框架,我们将在经典的MNIST数据集上,见证一个神经网络从零开始学会识... 目录当计算机学会“看”数字搭建开发环境MNIST数据集解析1. 认识手写数字数据库2. 数据预处理的

java字符串数字补齐位数详解

《java字符串数字补齐位数详解》:本文主要介绍java字符串数字补齐位数,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java字符串数字补齐位数一、使用String.format()方法二、Apache Commons Lang库方法三、Java 11+的St

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT

SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

《SpringSecurity认证、注销、权限控制功能(注销、记住密码、自定义登入页)》SpringSecurity是一个强大的Java框架,用于保护应用程序的安全性,它提供了一套全面的安全解决方案... 目录简介认识Spring Security“认证”(Authentication)“授权” (Auth

一文教你解决Python不支持中文路径的问题

《一文教你解决Python不支持中文路径的问题》Python是一种广泛使用的高级编程语言,然而在处理包含中文字符的文件路径时,Python有时会表现出一些不友好的行为,下面小编就来为大家介绍一下具体的... 目录问题背景解决方案1. 设置正确的文件编码2. 使用pathlib模块3. 转换路径为Unicod

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3