<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box>div { height: 50px; width: 50px; border-radius: 50%; line-height: 50px; text-align: center; font-size: 20px; font-weight: bold; color: white; margin: 10px; float: left; } .red { background-color: red; } .blue { background-color: blue; } </style> </head> <body> <div id="box"> </div> <script> </script> </body> </html>根据此HTML写出双色球选号js部分,号码不足两位前面补零
时间: 2023-09-21 20:07:40 浏览: 201
请问您需要的是生成随机号码的功能吗?还是用户手动选择号码的功能?如果是生成随机号码的功能,以下是可能的代码实现:
```javascript
const redBallNums = [];
const blueBallNums = [];
// 生成 6 个红球号码
while (redBallNums.length < 6) {
const num = Math.floor(Math.random() * 33) + 1;
if (!redBallNums.includes(num)) {
redBallNums.push(num);
}
}
// 生成 1 个蓝球号码
const blueNum = Math.floor(Math.random() * 16) + 1;
blueBallNums.push(blueNum);
// 将号码转换成两位数格式
const paddedRedBallNums = redBallNums.map(num => num.toString().padStart(2, '0'));
const paddedBlueBallNums = blueBallNums.map(num => num.toString().padStart(2, '0'));
// 将号码显示在页面上
const redBallsContainer = document.querySelector('#box');
paddedRedBallNums.forEach(num => {
const ball = document.createElement('div');
ball.classList.add('red');
ball.textContent = num;
redBallsContainer.appendChild(ball);
});
paddedBlueBallNums.forEach(num => {
const ball = document.createElement('div');
ball.classList.add('blue');
ball.textContent = num;
redBallsContainer.appendChild(ball);
});
```
这段代码会生成 6 个红球号码和 1 个蓝球号码,并将它们显示在页面上。如果您需要用户手动选择号码的功能,那么实现起来会更加复杂,需要考虑用户界面交互等问题。
阅读全文