JavaScript怎么实现简单抽奖系统
JavaScript怎么实现简单抽奖系统
这篇文章主要讲解了“JavaScript怎么实现简单抽奖系统”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript怎么实现简单抽奖系统”吧！
模拟实现抽奖系统
前端使用JavaScript代码实现抽奖系统，代码如下：
样式代码：
<style>body{background:url("bg.jpg")no-repeat;background-size:100%;}#box{position:absolute;left:50%;top:50%;margin:-250px00-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:8px8px15pxrgba(0,0,0,0.5);}#start{margin:0;height:50px;width:120px;font-size:30px;color:darkred;opacity:0.6;box-shadow:3px3px3px#f00;}#winner{border-radius:5px;background:pink;margin-left:100px;margin-right:100px;opacity:0.5;}</style>
主体代码
<divid="box"><pid="winner"> </p><buttontype="button"id="start">抽奖</button></div><script>varnames=["杰克马","麻花藤","giao哥","药酱","锅子","鹌鹑","大司马"];functionextrust(){varindex=parseInt(Math.random()*names.length);names.splice(index,1);//从参与人中删除中奖人document.getElementById('winner').innerText=names[index];}letstart=false;varflag;//定时任务标记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怎么实现简单抽奖系统这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是恰卡编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
