JavaScript怎么实现简单抽奖系统

这篇文章主要讲解了“javascript怎么实现简单抽奖系统”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript怎么实现简单抽奖系统”吧！

模拟实现抽奖系统

前端使用JavaScript代码实现抽奖系统，代码如下：

样式代码：

<style>        body{            background: url("bg.jpg") no-repeat;            background-size: 100%;        }        #box{            position: absolute;            left: 50%;            top: 50%;            margin: -250px 0 0 -250px;            text-align: center;            line-height: 100px;            font-size: 40px;            width: 500px;            height: 300px;            background: rgba(255,255,255,0.5);            border-radius: 10px;            box-shadow: 8px 8px 15px rgba(0,0,0,0.5);        }        #start{            margin: 0;            height: 50px;            width: 120px;            font-size: 30px;            color: darkred;            opacity: 0.6;            box-shadow: 3px 3px 3px #f00;        }        #winner{            border-radius: 5px;            background: pink;            margin-left: 100px;            margin-right: 100px;            opacity: 0.5;        }</style>

主体代码

<div id="box">        <p id="winner">&nbsp;</p>        <button type="button" id="start">抽奖</button>    </div>    <script>        var names = ["杰克马","麻花藤","giao哥","药酱","锅子","鹌鹑","大司马"];        function extrust(){            var index = parseInt(Math.random()*names.length);                names.splice(index,1);//从参与人中删除中奖人                document.getElementById('winner').innerText = names[index];        }        let start = false;        var flag;//定时任务标记        document.getElementById("start").addEventListener('click',function () {            if(names.length == 0){                document.getElementById('winner').innerText ="抽奖结束";                return;            }            if(start) {                //清除指定标记的定时任务                clearInterval(flag);                extrust();            }else{                flag =setInterval(function () {                    document.getElementById('winner').innerText = names[parseInt(Math.random()*names.length)];                },20)            }            //状态取反            start = !start;        })</script></body>

页面显示：

感谢各位的阅读，以上就是“JavaScript怎么实现简单抽奖系统”的内容了，经过本文的学习后，相信大家对JavaScript怎么实现简单抽奖系统这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！