随机抽取学员小页面

最新推荐文章于 2024-10-07 19:39:47 发布

Mr_liuxiaoyang

最新推荐文章于 2024-10-07 19:39:47 发布

阅读量76

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/Mr_liuxiaoyang/article/details/129824935

版权

代码如下

<!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>Document</title>
    <style>
        .wrapper {
            width: 500px;
            height: 450px;
            background-color: #ebd6d6;
            padding-top: 20px;
        }

        #yuan {
            width: 300px;
            height: 300px;
            background-color: #999;
            margin: 0 auto;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28px;
            font-weight: 600;
            color: red;
            border: 3px solid red;
        }

        #star {
            display: block;
            width: 150px;
            height: 70px;
            margin: 40px auto;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="yuan">等待抽取学员</div>
        <button id="star" onclick="cc(false)">开始</button>
    </div>
    <script>
        let fo=false,id;
        function cc(lo) {
            fo=fo==lo
            let count = 181000;
            let _yuan = document.getElementById("yuan");
            let _star = document.getElementById("star");
            if (fo) {
                id = setInterval(
                function test() {
                    _yuan.innerHTML = "全栈" + count;
                    count--;
                }, 100); 
                _star.innerHTML="停止"
            }else{
                _star.innerHTML="重新开始"
                clearInterval(id);
            }
             
        }

    </script>
</body>

</html>