这篇文章主要讲解了“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>页面显示：
感谢各位的阅读，以上就是“JavaScript怎么实现简单抽奖系统”的内容了，经过本文的学习后，相信大家对JavaScript怎么实现简单抽奖系统这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
