JavaScript怎么实现简单抽奖系统(javascript,开发技术)

时间:2024-04-28 04:42:59 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

模拟实现抽奖系统

前端使用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">&nbsp;</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怎么实现简单抽奖系统

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:JavaScript怎么实现简单抽奖系统的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:C#特性怎么定义下一篇:

4 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18