实例演示双色球
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双色球</title><style>.box {display: grid;grid-template-columns: repeat(auto-fill, 30px);grid-auto-rows: 30px;gap: 5px;}.box>div {border-radius: 50%;display: grid;place-items: center;background-color: red;color: white;box-shadow: 2px 2px 2px #666;}.box>div:last-of-type {background-color: blue;}</style></head><body><div class="box"></div><script>// 红球：1-33=>6个，不重复，排序// 蓝球：1-16=>1个，可以和红球重复// 1.先取红球，放在一个中奖号数组中，排序// 2.然后把蓝球追加到数组中// 3.还要把中奖数组渲染到页面：dom// 临时数组：放红球let arr=[];// 中奖数组，最后应该有7个数let res=[];//1.生成1-33个红球号for(let i=1;i<34;i++){arr.push(i);}console.log(arr);// 2.从33个红球中取出6个for (let i=0; i<6; i++){// arr的下标取值范围：0-32// math.radom():0-1之间的小数// console.log(Math.random());// console.log(Math.random()*33);// 这样就得到一个0-33之间的小数，再给它作一个取整的操作，向上取整，就可以得到1-33中的任何一个整数// console.log(Math.floor(Math.random()*arr.length));let index=Math.floor(Math.random()*arr.length);res.push(arr[index]);arr.splice(index,1);}console.log(res);//排序res.sort((a, b)=>a - b);console.log(res);// 3.生成一个蓝球，并追加到中奖数组中let blue=Math.floor(Math.random()*16)+1;console.log(blue);res.push(blue);console.log(res);// 4.将中奖号码显示到页面中const box=document.querySelector('.box');res.forEach(item=>{const ball=document.createElement('div');ball.textContent=item;box.append(ball);})</script></body></html>
效果图如下：
