JavaScript实现简单抽奖系统
作者:PengZhen_
这篇文章主要为大家详细介绍了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"> </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>
页面显示:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。