基于javascript实现简单的抽奖系统

时间：2021-05-25

本文实例为大家分享了js实现简单的抽奖系统，供大家参考，具体内容如下

<!doctype html><html lang="en"><head> <meta charset="gb2312"> <title>抽奖活动</title> <style>*{ margin:0;padding:0;}#title{ color:red;text-align:center;margin:0 auto;width:240px;height:70px;padding-top:10px;background:opacity(0);}.btns{ width:190px;height:30px;margin:0px auto;} .btns span{ display:block;float:left;width:80px;height:28px;text-align:center;background:#036;color:#fff;cursor:pointer;border:1px solid #eee;border-radius:8px;font-family:"微软雅黑";font-size:14px;line-height:28px;margin-right:10px;}#txt{ font-size:14px;color:#ccc999;text-align:center;margin:0 auto;width:190px;height:50px;padding-top:10px;} </style> <script> var mytype=["iPhone6s","iPad Air2","DELL外星人","键鼠套装","1000元超市购物卡","200元话费充值卡","谢谢参与","品牌耳机","港澳台7日游","50元优惠券"],//定义奖品池 timer=null, count=0;//加载时触发 window.onload=function(){ var start = document.getElementById("start"); var stop = document.getElementById("stop"); start.onclick=startFun;//这个函数后面加括号，就直接调用了该函数，所以不要加 stop.onclick=stopFun; //绑定键盘事件 document.onkeyup=function(e){ e = e || window.event; if(e.keyCode==13){ if(count==0){ startFun(); count=1; } else{ stopFun(); count=0; } } } } //点击开始，标题栏开始轮动 function startFun(){ clearInterval(timer);//开始时，清除计时器，避免二次触发 var title = document.getElementById("title"); var start = document.getElementById("start"); timer = setInterval(function(){ var num= Math.floor(Math.random()*mytype.length); title.innerHTML=mytype[num]; },50); start.style.background="#ccc"; } //点击停止，标题栏停止轮动并输出轮动结果 function stopFun(){ var start = document.getElementById("start"), txt = document.getElementById("txt"), title = document.getElementById("title"); clearInterval(timer);//清除计时器，停止计时器 start.style.background="#036"; } </script><body> <div> <h2 id="title">开始抽奖！</h2> </div> <div class="btns"> <span id="start">开始</span> <span id="stop">停止</span> </div> <div id="txt">支持回车键(Enter)开始/停止。</div></body></html>

效果图：

想要学习更多关于javascript抽奖功能，请参考此专题：javascript实现抽奖功能

实现的功能就是这么简单，希望大家可以中大奖哦！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章