<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#lotteryBalls {
display: flex;
}
#lotteryBalls > div {
height: 50px;
width: 50px;
border-radius: 50%;
line-height: 50px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: white;
margin: 10px;
}
.red {
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="userBalls"></div>
<div id="lotteryBalls"></div>
<script >
/ * * 1. generates a digital ball /
husband function random (n, min, max) {
// create an array to hold the generated random number n
let nums = [];
// the number of random number generation control
for (let i = 0; i < n; i++) {
// generates a random number range min to max
let num = Math.round(Math.random() * (max - min) + min);
@ Deduplication: determining whether there is a random number num nums array in which
if (nums.indexOf(num) === -1) {
// does not exist, add an array
nums.push(num);
} else {
// exist, this shows that the current set aside a random number. Cycle once again.
i--;
}
}
// the final random number array returned out
return nums;
}
// 6 generates a random number from 1 to 33, the result is an array.
let redBalls = makeRandom(6, 1, 33);
// generates a random number from 1 to 16, the result is an array.
let blueBalls = makeRandom(1, 1, 16);
/ * 2. Digital added to the page * /
/*
makeBalls (): The digital array generates ball, to render the page
arr: random number array (an array of red balls, basketball array)
className: Different balls have different class attribute name
*/
function makeBalls(arr, className) {
// sequentially extracts each element in the array
for (let i = 0; i < arr.length; i++) {
// taken out of the element into each <div> tag and the page rendered to
lotteryBalls.innerHTML += `<div class="${className}">${arr[i]}</div>`;
}
}
// Render the red ball
makeBalls(redBalls, "red");
// Render basketball
makeBalls(blueBalls, "blue");
</script>
</body>
</html>