写一个抽奖器

逢年过节抽奖和抽人回答问题需要一个随机挑人选的程序

我用h5+css+js做了一个简易的抽奖器

界面

代码

<style type="text/css">
        #isyou {
            font-size: 80px;
            text-align: center;
            margin: 100px auto;
        }
        
        #btn {
            width: 180px;
            height: 60px;
            border: none;
            background: dodgerblue;
            display: block;
            margin: 0 auto;
            color: #fff;
            font-size: 30px;
            border-radius: 6px;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
        }
        
        #btn:active {
            background: slateblue;
        }
    </style>

 <div id="isyou">请点击下面的按钮，开始抽奖</div>
    <span id="btn">点击开始</span>

js逻辑在于，用随机数获取数组序号，从而获取随机名字

<script type="text/javascript">
    var str = "甲,乙,丙,丁";
    let arr = str.split(",");
    let div = document.querySelector("div");
    let span = document.querySelector("span");


    let times = "";
    let btnSta = true;
    span.onclick = function() {
        if (btnSta) {
            times = setInterval(function() {
                let num = Math.round(Math.random() * (arr.length - 1));


                div.innerHTML = arr[num];
            }, 100);
            span.innerHTML = "结束抽奖";
            btnSta = false;
        } else {
            clearInterval(times);
            span.innerHTML = "开始抽奖";
            btnSta = true;
        }
    };
</script>