Simple two-color ball rolling code based on HTML+JS

Limit the range of 7 numbers on the JS side, filter the random numbers, render them on the page, and use the time function to scroll. In order to improve the user experience, after the start button is clicked, an event listener must be added to disable it, and the start button will not resume its usable state until the end button is clicked.

The code and comments are below, please read it.

<!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>
</head>
<style>
    section>div:nth-child(1) {
        display: flex;
        margin-bottom: 20px;
    }

    section>div:nth-child(1)>aside {
        width: 80px;
        height: 80px;
        text-align: center;
        border-radius: 50%;
        font-size: 40px;
        line-height: 80px;
        background-color: red;
        color: white;
        margin-right: 5px;
    }

    section>div:nth-child(1)>aside:nth-child(7) {
        background-color: blue;
    }

    p {
        margin-bottom: 50px;
    }
</style>

<body>
    <p>
        【双色球】<br />
        红球:6个,取值范围:1-33<br />
        蓝球:1个,取值范围:1-16<br />
        【条件】<br />
        红色球的6个数字不可以重复<br />
        蓝色球的数字可以与红色球重复
    </p>
    <section>
        <div class="container"></div>
        <div>
            <input type="button" value="开始">
            <input type="button" value="结束">
        </div>
    </section>
    <script src="./shuang.js"></script>
</body>

</html>

//生成随机的双色球数字
function getNum() {
    let red = [];
    let min = 1;
    let max = 33;
    let max2 = 16;
    let blue = Math.ceil(Math.random() * (max2 - min + 1));
    //判断重复
    for (let i = 0; i < 6; i++) {
        //判断是否出现重复
        red[i] = Math.ceil(Math.random() * (max - min + 1));
        let temp1 = red.indexOf(red[i]);
        let temp2 = red.lastIndexOf(red[i]);
        //两个返回的下标不相等，就表明重复；
        if (temp1 != temp2) {
            i--;
        }
    }
    let numArr = [...red, blue];
    return numArr;
}

render();

//渲染生成的数字(把我在js存放的数据展示在页面上这个行为被称为渲染)
//为了方便多次调用render这个方法，所以给他初始化值，即七个0，作为圆的初始数字
function render(ballAll = [0, 0, 0, 0, 0, 0, 0]) {
    //新建一个字符串
    let str = "";
    //声明节点 遍历ballAll这个数组向字符串中添加aside标签
    ballAll.forEach(item => {
        str += `<aside>${item}</aside>`;
    });
    //获取渲染区域，即父节点(类名是“container”的div)
    let conEle = document.getElementsByClassName("container")[0];
    //将str字符串添加进父节点中
    conEle.innerHTML = str;
}

//获取所有的input节点
let btnEle = document.querySelectorAll("section>div>input");
//给两个input加上DOM2事件
btnEle[0].addEventListener("click",startGame);
btnEle[1].addEventListener("click",endGame);

//获取圆的节点
let asideEle = document.getElementsByTagName("aside");

let gunD = "";//接收滚动
//开始功能
function startGame() {
    //当开始按钮被点击时，该按钮处于不可点状态
    btnEle[0].disabled = true;
    //时间函数
    gunD = setInterval(() => {
        //获取生成的双色球数字
        let ballAll = getNum();
        //不停替换圆中的值,更改页面的渲染
        for (let i = 0; i < ballAll.length; i++) {
            asideEle[i].innerHTML = `${ballAll[i]}`;
        }
    }, 90);
}

//结束功能
function endGame() {
    //点击关闭时，则停止滚动
    clearInterval(gunD);
    //当关闭按钮被点击，开始按钮又变成可点状态
    btnEle[0].disabled = false;
    //获取生成的双色球数字
    let ballAll = getNum();
    //渲染页面
    render(ballAll);
}

Simple two-color ball rolling code based on HTML+JS

Guess you like