用JavaScript做一个简易抽奖的效果

效果图如下：

html+css代码：

 <style>
        #one {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 3px solid red;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgb(205, 10, 226);
        }

        #two {
            width: 80px;
            height: 30px;
            background-color: greenyellow;
            border: none;
            margin-left: 100px;
            margin-top: 30px;
        }
    </style>

 

js代码：

<div id="one">准备抽取学员</div>
    <button id="two" onclick="scl()">开始</button>
    <script>
        let con = 0;
        function scl() {
            var _one = document.getElementById('one');
            var _two = document.getElementById('two');
            let col = _two.innerHTML;
            if (col == '开始') {
                con = setInterval(function () {
                    _one.innerHTML = '开始抽取学员1800129' + (Math.floor(Math.random() * 100) + '').padStart(2, 0);
                    _two.innerHTML = '结束';
                }, 50
                )
            } else {
                clearInterval(con);
                _two.innerHTML = "开始";
                con = null;
            }

        }
    </script>

各位小伙伴们快去试试效果吧！