<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>双色球</title> <style> .balls{ display: flex; } .balls div{ width: 50px; height: 50px; border-radius: 50%; line-height: 50px; text-align:center; color: white; margin: 20px; font-weight: bold; font-size: 20px; } .red{ background: red; } .blue{ background: blue; } </style> </head> <body> <div id="balls" class="balls">
<!-- 后期红球和篮球动态生成，下面的两个div在测试页面时使用 -->
<!-- <div class="red">1</div>
<div class="blue">2</div> -->
</div> <script>
/*
1. 生成球的数字
2. 数字添加到页面上
*/
// 生成范围 min 到 max 内任意随机数
// function makeRandom(min, max){
// return Math.round(Math.random() * (max - min) + min);
// }
/* makeRandom():生成 n 个范围在 min 到 max 的不重复的随机数
n: 生成 n 个随机数
min: 随机数的最小值
max: 随机数的最大值
*/
/* 1. 生成球的数字 */
function makeRandom(n, min, max) {
// 创建一个数组用来保存生成的 n 个随机数
let nums = [];
// 控制生成随机数的个数
for (let i = 0; i < n; i++) {
// 生成一个范围 min 到 max 的随机数
let num = Math.round(Math.random() * (max - min) + min);
// 去重：判断随机数 num 是否存在于 nums 数组里面
if (nums.indexOf(num) === -1) {
// 不存在，添加进数组
nums.push(num);
} else {
// 存在，说明当前这一个随机数作废。重新循环一次。
i--;
}
}
// 把最终的随机数数组返回出去
return nums;
}
// 生成 6 个 1 到 33 的随机数，结果为数组。
let redBalls = makeRandom(6, 1, 33);
// 生成 1 个 1 到 16 的随机数，结果为数组。
let blueBalls = makeRandom(1, 1, 16);
/* 2. 数字添加到页面上 */
/*
方法1：
makeBalls(): 将数组中的数字生成球，渲染到页面上
arr: 随机数数组（红球的数组、篮球的数组）
className: 不同的球有不同 class 属性名
*/
function makeBalls(arr, className) {
// 依次取出数组中的每一个元素
for (let i = 0; i < arr.length; i++) {
// 将取出来的每一个元素放到 <div> 标签中并渲染到页面上
lotteryBalls.innerHTML += `<div class="${className}">${arr[i]}</div>`;
}
}
// 渲染红球
makeBalls(redBalls, "red");
// 渲染蓝球
makeBalls(blueBalls, "blue");
/*
方法二：
function makeBalls(arr, className){
let str = arr.map((item) => {
return `<div class="${className}">${item}</div>`
}).join("");
return str;
}
// 将红球蓝球渲染到页面上
lotteryBalls.innerHTML = makeBalls(redBalls, "red") + makeBalls(blueBalls, "blue");
*/
</script> </body> </html>