随机生成数

失去了才珍惜

已于 2024-06-19 18:51:10 修改

阅读量215

点赞数 9

文章标签： javascript 前端 html

于 2024-06-19 18:45:49 首次发布

本文链接：https://blog.csdn.net/weixin_70633211/article/details/139810617

版权

大学生期末总分数是有了，其他项该怎么打分才能凑齐一个总分一样的分数呢，这段代码具有生成随机数的功能。用户可输入一个目标数值并设定多个分数值，点击生成按钮后，程序将持续生成随机数组合，直至找到10组其总和与目标数值相等的组合，并在表格中展示。此外，用户还能通过点击增加新项按钮，以添加更多的输入项。

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>随机数生成器</title>
	</head>

<body>
    <h1>随机数生成器</h1>
    <div id="itemContainer">
        <!-- 这里创建了三个输入框用于输入各项的分数 -->
        第1项<input type="number" id="num1Input" value="0">分<br>
        第2项<input type="number" id="num2Input" value="0">分<br>
        第3项<input type="number" id="num3Input" value="0">分<br>
    </div>
    <div class="center">
        <div class="hang">
            <p>请输入一个数字：</p>
            <input type="number" id="inputNum">
            <!-- 生成随机数的按钮 -->
            <button id="generateButton">生成随机数</button>
            <!-- 增加新项的按钮 -->
            <button id="addItemButton">增加新项</button>
        </div>
        <table id="resultTable">
            <thead>
                <tr>
                    <!-- 表头：满足条件的随机数和随机数之和 -->
                    <th>满足条件的随机数</th>
                    <th>随机数之和为</th>
                </tr>
            </thead>
            <tbody id="resultBody">
                <!-- 这里将用于显示生成的随机数结果 -->
            </tbody>
        </table>
    </div>
    <script>
        let itemCount = 3; 
        // 初始化项的数量为 3

        // 为"增加新项"按钮添加点击事件处理程序
        document.getElementById("addItemButton").addEventListener("click", function() {
            itemCount++; 
            // 每次点击增加项的数量
            const newItem = document.createElement('div'); 
            // 创建一个新的 div 元素
            newItem.innerHTML = `第${itemCount}项<input type="number" id="num${itemCount}Input" value="0">分<br>`;
            // 设置新项的内容，包括输入框和相关文本
            document.getElementById("itemContainer").appendChild(newItem);
            // 将新项添加到"itemContainer"容器中
        });

        // 为"生成随机数"按钮添加点击事件处理程序
        document.getElementById("generateButton").addEventListener("click", function() {
            var inputNum = parseInt(document.getElementById("inputNum").value);
            // 获取用户输入的数字并转换为整数

            if (isNaN(inputNum)) {
                alert("请输入有效的数字");
                return;
            }
            // 如果输入不是有效的数字，弹出提示并返回

            let total = 0;
            for (let i = 1; i <= itemCount; i++) {
                var num = parseInt(document.getElementById(`num${i}Input`).value);
                // 遍历所有的输入项获取其值并转换为整数

                if (isNaN(num)) {
                    alert(`请设置有效的第${i}项值`);
                    return;
                }
                // 如果某一项的值不是有效数字，弹出提示并返回

                total += num;
            }

            if (total > 100) {
                alert("各项之和不能超过 100");
                return;
            }
            // 如果各项之和超过 100，弹出提示并返回

            var resultBody = document.getElementById("resultBody");
            resultBody.innerHTML = "";
            // 清空结果表格的内容

            var count = 0;
            while (count < 10) {
                let randNums = [];
                for (let i = 1; i <= itemCount; i++) {
                    randNums.push(Math.floor(Math.random() * (parseInt(document.getElementById(`num${i}Input`)
                       .value) + 1)));
                }
                // 生成随机数数组，每个随机数在 0 到对应输入项的值之间

                if (randNums.reduce((a, b) => a + b, 0) === inputNum) {
                    var row = `<tr><td>${randNums.join(', ')}</td><td>${randNums.reduce((a, b) => a + b, 0)}</td></tr>`;
                    resultBody.insertAdjacentHTML('beforeend', row);
                    count++;
                }
            }
            // 当随机数之和等于用户输入的数字时，将随机数及其和添加到结果表格中，直到生成 10 组满足条件的结果
        });
    </script>
</body>
</html>

添加一些CSS样式，使页面美观。

<style>
			body {
				font-family: Arial, sans-serif;
				background-color: #f0f0f0;
				margin: 0;
				padding: 0;
			}

			#itemContainer {
				text-align: center;

			}

			input {
				margin: 5px;
			}

			input[type="number"] {
				padding: 5px;
				width: 80px;
			}

			h1 {
				text-align: center;
				margin-top: 20px;
			}

			.center {
				margin-top: 20px;
				text-align: center;
			}

			.hang {
				text-align: center;
			}

			p {
				font-size: 18px;
				text-align: center;
				line-height: 20px;
			}

			#generateButton,
			#addItemButton {
				padding: 10px 20px;
				background-color: #4CAF50;
				color: white;
				border: none;
				cursor: pointer;
				text-align: center;
			}

			#inputNum {
				width: 100px;
				height: 24px;
			}

			#generateButton:hover,
			#addItemButton:hover {
				background-color: #45a049;
			}

			table {
				width: 50%;
				margin: 0 auto;
				border-collapse: collapse;
				margin-top: 20px;
				text-align: center;

			}

			thead th {
				background-color: #4CAF50;
				color: white;
				padding: 10px;
				text-align: center;
			}

			tbody tr td {
				padding: 10px;
				border-bottom: 1px solid #ddd;
				text-align: center;
			}
		</style>

成品

失去了才珍惜

关注

9
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随机生成数

大学生期末分数有了，其他该怎么打分呢，这段代码具有生成随机数的功能。用户可输入一个目标数值并设定多个分数值，点击生成按钮后，程序将持续生成随机数组合，直至找到10组其总和与目标数值相等的组合，并在表格中展示。此外，用户还能通过点击增加新项按钮，以添加更多的输入项。添加一些CSS样式，使页面美观。
复制链接

扫一扫