10以内加减法生成器，一年级数学练习题-CSDN博客

本文链接：https://blog.csdn.net/clarkbrave/article/details/143798680

写这个加减法生成器的原因，是同事的孩子上一年级，想在家让孩子多练习一些加减法，她自己又不愿意费脑子出题，所以就问我能不能用程序生成100道。每次100道。我觉得符合她要求最简单的语言就是web前段，html,css,js,于是我就试着写了一下，还不错。打开即用。不用联网，也不用安装，就一个html文件。于是分享给大家。

效果图：

使用方式：

把下面代码复制到一个html文件里。用浏览器打开文件就行了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10以内加减法生成器</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        body {
            margin: 20px;
			font-size:20px;
        }
		#container{width:1000px;margin:auto;}
        #questions {
			margin-top:10px;
			overflow:hidden;
			
        }
		.suanshu_span{float:left;display:inline-block;width:20%;font-size:24px;
			padding:6px 5px;
		}
		.form-control {
			display: inline-block;
			width: 100px;
			height: 34px;
			padding: 6px 12px;
			font-size: 14px;
			line-height: 1.42857143;
			color: #555;
			background-color: #fff;
			background-image: none;
			border: 1px solid #ccc;
		}
		.btn {
			display: inline-block;
			outline:none;margin-bottom: 0;font-weight: 400;text-align: center;white-space: nowrap;vertical-align: middle;
			cursor: pointer;border: 1px solid transparent;
			padding: 6px 12px;font-size: 14px;line-height: 1.42857143;user-select: none;background-color:#449d44;color:white;
		}
		#well{padding:10px;background-color:#eee;}
    </style>
</head>
<body>
    <section id="container">
    <h1 style="text-align:center;padding:20px;">加减法生成器</h1>
	<div id="well">
	<span style="display:none;">起始数字：<input type="number" id="start_num" value="1" class="form-control"/>
	结束数字：<input type="number" id="end_num" value="10"  class="form-control"/>
	数量：<input type="number" id="count" value="100"  class="form-control"/>
	</span>
	<button type="button" onclick="make()" class="btn ">生成</button>
	<button type="button" onclick="show_result()" class="btn " style="background-color:#31b0d5">显示结果</button>
	<button type="button" onclick="hidde_result()" class="btn " style="background-color:#286090">隐藏结果</button>
	</div>
    <div id="questions"></div>
</section>

    <script>
	function show_result(){
			elements=document.getElementsByClassName('result');
			for(var i = 0; i < elements.length; i++) {
				elements[i].style.display = "inline-block";
			}
		}
		function hidde_result(){
			elements=document.getElementsByClassName('result');
			for(var i = 0; i < elements.length; i++) {
				elements[i].style.display = "none";
			}
		}
		var  start_num=0;
		var  end_num=0;
		var  count=0;
		function make(){
			start_num=parseInt(document.getElementById('start_num').value);
			end_num=parseInt(document.getElementById('end_num').value);
			count=parseInt(document.getElementById('count').value);
			console.log(start_num,end_num,count)
			if(start_num.length==0 || end_num.length==0 || count.length==0 ){
				alert('三个值都必须输入');
				
			}else{
			//生成
				const questionsDiv = document.getElementById('questions');
				const questions = generateUniqueQuestions(count, end_num);
				questionsDiv.innerHTML = questions.join('');
			}
		}
		//默认调用
		document.addEventListener('DOMContentLoaded', () => {
            make()
        });
		
		
        function getRandomInt(max) {
            return Math.floor(Math.random() * (max-start_num))+start_num;
        }

        function generateUniqueQuestions(count, maxNum) {
            const questionsSet = new Set();
            let questions = [];

            while (questions.length < count) {
                const num1 = getRandomInt(maxNum + 1); // 包括maxNum本身
                const num2 = getRandomInt(maxNum + 1);
                const operation = Math.random() > 0.5 ? '+' : '-';
                let question;

                // 确保题目在有效范围内且不重复
                if ((operation === '+' && num1 + num2 <= maxNum) ||
                    (operation === '-' && num1 >= num2)) {
						let sum=0;
						if (operation === '+'){
							sum=num1+num2;
						}
						if (operation === '-'){
							sum=num1-num2;
						}
                    question ='<p class="suanshu_span">'+ `${num1} ${operation} ${num2} = `+'<b class="result">'+sum+'</b>' +'</p>';
                    if (!questionsSet.has(question)) {
                        questionsSet.add(question);
                        questions.push(question);
                    }
                }
            }

            return questions;
        }

       
    </script>
</body>
</html>