JavaScript怎么实现简单抽奖系统
导读:本文共1133字符,通常情况下阅读需要4分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 模拟实现抽奖系统前端使用JavaScript代码实现抽奖系统,代码如下:样式代码:<style>body{background:url("bg.jpg")no-repeat;background-size:100%;}#box{position:absolute;left:50%;top:50%;margin:-... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。模拟实现抽奖系统
前端使用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>
页面显示:
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:
JavaScript怎么实现简单抽奖系统的详细内容,希望对您有所帮助,信息来源于网络。