双色球

CchiozH.

于 2021-01-14 22:19:00 发布

阅读量98

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/m0_52602525/article/details/112642674

版权

这篇博客展示了如何使用HTML和JavaScript实现一个简单的页面，点击开始按钮生成6个不重复的1-32之间的数字作为红球，再生成1个1-16之间的数字作为蓝球，并将这些数字实时渲染到页面上。点击结束按钮则停止数字生成。代码中包含了一个获取不重复随机数的函数和页面渲染函数。

摘要由CSDN通过智能技术生成

HTML代码

    <section>
        <p>0</p>
        <p>0</p>
        <p>0</p>
        <p>0</p>
        <p>0</p>
        <p>0</p>
        <p>0</p>
    </section>
    <div>
        <input type="button" value="开始" onclick="start()">
        <input type="button" value="结束" onclick="end()">
    </div>

JS代码

//获取6个不重复的数字（1-32）
function getBallNum() {
    let set = new Set();
    while (true) {
        //获取6个不重复的红球数字（1-32）
        set.add(getNum(1, 32));
        if (set.size == 6) {
            let ballNum = [...set];
            //获取1个蓝球数字（1-16）
            ballNum.push(getNum(1, 16));
            return ballNum;
        }
    }
}

//渲染页面
function render() {
    let pEles = document.getElementsByTagName("p");
    let ballNum = getBallNum();
    for (let index in pEles) {
        pEles[index].innerHTML = ballNum[index];
    }

}

let inpEles = document.getElementsByTagName("input")[0];
let timer;
//点击开始调用函数
function start() {
    timer = setInterval(render, 100);
    inpEles.disabled = true;
}
//点击结束调用函数
function end() {
    clearInterval(timer);
    inpEles.disabled = false;
}