写一个双色球的程序,页面效果如图所示。 逻辑: 红球:从 1~33 中,选取 6 个,不能够重复 蓝球:从 1~16 中,选取 1 个 要求: 点击“begin",红球按从小到大的顺序输出 提示: Math.random() 生成[0,1 )之间的随机数 web
时间: 2024-10-27 08:10:33 浏览: 25
为了编写一个简单的双色球选号程序,我们可以使用HTML、CSS和JavaScript来构建基本的页面结构和交互逻辑。这里是一个基础的示例,你可以根据实际需求进行美化和功能完善:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>双色球选号</title>
<style>
#red-balls, #blue-ball {
display: flex;
justify-content: space-around;
margin-bottom: 1rem;
}
button {
margin-top: 1rem;
}
</style>
</head>
<body>
<h1>双色球选号</h1>
<div id="red-balls">
<span id="ball-1">-</span>
<span id="ball-2">-</span>
<span id="ball-3">-</span>
<span id="ball-4">-</span>
<span id="ball-5">-</span>
<span id="ball-6">-</span>
</div>
<span id="blue-ball">蓝球:</span>
<button onclick="generateNumbers()">开始</button>
<script>
function generateNumbers() {
const redBalls = [];
for (let i = 1; i <= 6; i++) {
let ball = Math.floor(Math.random() * 34) + 1; // 1~34
while (redBalls.includes(ball)) { // 确保不重复
ball = Math.floor(Math.random() * 34) + 1;
}
redBalls.push(ball);
document.getElementById(`ball-${i}`).innerText = ball;
}
const blueBall = Math.floor(Math.random() * 17) + 1; // 1~16
document.getElementById("blue-ball").innerText = blueBall;
// 按照升序排序红球
redBalls.sort((a, b) => a - b);
for (let i = 1; i <= 6; i++) {
document.getElementById(`ball-${i}`).innerText = redBalls[i - 1];
}
}
</script>
</body>
</html>
```
在这个示例中,我们创建了一个包含六个红球和一个蓝球选择区的简单布局。当点击“开始”按钮时,`generateNumbers`函数会生成随机号码并填充到相应的区域。红球部分自动按照从小到大排序。
阅读全文