时间函数-双色球

最新推荐文章于 2024-01-13 22:11:02 发布

V________

最新推荐文章于 2024-01-13 22:11:02 发布

阅读量209

点赞数

分类专栏：练习文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/V________/article/details/112483912

版权

练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

function suiji(min, max) {
    if (min > max) {
        [min.max] = [max, min];
    }
    let i = Math.floor(Math.random() * (max - min) + min);
    return i;
}
function six() {
    let set = new Set();
    while (true) {
        let i = suiji(1, 33);
        set.add(i);
        if (set.size == 6) {
            return set;
        }
    }
}
let time;
function begin() {
    clearInterval(time);
    time = setInterval(function start() {
        let arr = [...six()];
        let span = document.querySelectorAll('span');
        for(let i=0;i<=5;i++) {
            span[i].innerHTML = arr[i];
        }
        let i = suiji(1, 17);
        span[6].innerHTML = i;
    }, 100);
}
function end() {
    clearInterval(time);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./double.css">
</head>
<body>
    <span>0</span>
    <span>0</span>
    <span>0</span>
    <span>0</span>
    <span>0</span>
    <span>0</span>
    <span>0</span>
    <div>
        <input type="button" value="开始" onclick="begin()">
        <input type="button" value="结束" onclick="end()">
    </div>
    <script src="./double.js"></script>
</body>
</html>

span {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: rgb(243, 82, 82);
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
    margin-right: 40px;
    font-size: 20px;
    color: white;
}
body>span:nth-last-of-type(1) {
    background-color: rgb(88, 88, 245);
}
input {
    margin-top: 30px;
    margin-right: 20px;
}