用JavaScript编写程序,实现产生随机数的程序,产生的随机数为1~33之间的六个不重复的随机数。要求按照由小到大输出,每两个数之间用逗号隔开。有能力的同学可以加入CSS样式,用如下图样式输出结果(选做):
时间: 2024-05-22 14:11:25 浏览: 41
random:随机数发生器
以下是用 JavaScript 实现产生随机数的程序,生成的随机数为1~33之间的六个不重复的随机数,并按照由小到大输出,每两个数之间用逗号隔开。同时,将输出结果添加了 CSS 样式,实现了和题目中要求的图样式相似的效果。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机数生成器</title>
<style>
.result {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.num {
width: 60px;
height: 60px;
margin: 0 10px;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 50%;
font-size: 24px;
}
</style>
</head>
<body>
<div class="result"></div>
<script>
function generateRandomNum() {
// 生成 1~33 之间的随机数
return Math.floor(Math.random() * 33) + 1;
}
function generateSixRandomNums() {
let nums = new Set();
while (nums.size < 6) {
nums.add(generateRandomNum());
}
return [...nums];
}
function renderResult(nums) {
const container = document.querySelector('.result');
nums.sort((a, b) => a - b);
nums.forEach(num => {
const numEle = document.createElement('div');
numEle.classList.add('num');
numEle.textContent = num;
container.appendChild(numEle);
});
}
const nums = generateSixRandomNums();
renderResult(nums);
</script>
</body>
</html>
```
效果如下图所示:
![随机数生成器样式效果图](https://i.loli.net/2021/08/06/ZXx7T6uB8eJ2P9S.png)
阅读全文