原生js怎么实现简易抽奖系统
原生js怎么实现简易抽奖系统
这篇文章主要讲解了“原生js怎么实现简易抽奖系统”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“原生js怎么实现简易抽奖系统”吧！
效果图
原理：
其实这里的原理就是通过按钮的状态是开始抽奖还是停止 如果i=ture 那就触发定时器 每50毫秒更换一次中奖的内容。如果i=false，那就清除定时器，显示最后的抽奖结果
下面我给大家画了个更直观的图
HTML结构与样式
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}h3{font-weight:normal;}.box{width:450px;height:auto;background:#fff;border-radius:3px;margin:50pxauto;padding-bottom:1em;box-shadow:010px10px0rgba(0,0,0,0.2),05px15px0rgba(0,0,0,0.19);}.header{width:100%;height:auto;padding:0.5em0.8em;border-bottom:1pxsolid#ccc;box-sizing:border-box;}.body{width:100%;height:auto;text-align:center;}.body:after{content:"";display:block;clear:both;}.body>div{width:180px;margin:0auto;}.body>div>span{padding-top:1em;float:left;}#tip{display:none;}.footer{width:180px;height:30px;background:#2ab8ff;line-height:30px;text-align:center;margin:1emauto;color:#ccc;border:1pxsolid#2193cc;border-radius:3px;cursor:pointer;}.footer:hover{background:#4ec1fb;}</style></head><body><divclass="box"><divclass="header"><h3>简易抽奖系统</h3></div><divclass="body"><div><spanid="tip">恭喜你！获得：</span><spanid="put"></span></div></div><divclass="footer">点击抽奖</div></div>
js代码
<script>/*获取按钮*/varbtn=document.querySelector('.footer');/*获取提示的标签*/vartip=document.querySelector('#tip');/*获取要输出的标签*/varput=document.querySelector('#put');/*定义中奖的项目*/vargift=['QQ会员','黄钻','绿钻','黑钻','紫钻','红钻','蓝钻','钻皇'];/*定义i==true用于判断*/vari=true;/*定义定时器*/varTimer;varn=0;btn.onclick=function(){if(i==true){btn.style.background='#f1516c';btn.style.borderColor='#db2745';tip.style.display='block';Timer=setInterval(function(){n++;if(n==gift.length){n=0;}put.innerHTML=gift[n];},50)btn.innerHTML='停止';i=false;}else{btn.style.background='#2ab8ff';btn.style.borderColor='#2193cc';clearInterval(Timer);btn.innerHTML='开始抽奖';i=true;}}</script>
感谢各位的阅读，以上就是“原生js怎么实现简易抽奖系统”的内容了，经过本文的学习后，相信大家对原生js怎么实现简易抽奖系统这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是恰卡编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
