这篇文章主要为大家介绍了 javascript 跑马灯抽奖特效,具有一定的参考价值,感兴趣的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>抽奖游戏</title>
- <style>
- #box{
- width:720px;
- margin:0 auto;
- margin-top:20px;
- box-shadow:0px 0px 2px #333;
- }
- .pic{
- width:200px;
- height:200px;
- float:left;
- line-height:200px;
- margin:10px;
- border:5px #fff solid;
- color:blue;
- font-size: 35px;
- text-align: center;
- }
- .anniu{
- width:200px;
- height:200px;
- float:left;
- margin:10px;
- }
- #drawBtn{
- color:red;
- font-size:30px;
- width:200px;
- height:200px;
- box-shadow:0px 0px 2px #333;
- font-weight: bold;
- }
- </style>
- <script>
- window.onload=init;
- var setting={
- count:0,
- total:24,
- delay:20,
- picIndex:[0,1,2,4,7,6,5,3]
- }
- function init(){
- document.getElementById("drawBtn").onclick=function(){
- setting.count=0;
- setting.delay=20;
- this.disable=true;//禁用按钮
- var drawBtn=this;
- //获取所有图片的div
- var allDivs=document.getElementsByClassName("pic");
- //获得一个随机整数,代表中奖的那个位置,3*8+(0-7)
- setting.total+=Math.floor(Math.random()*allDivs.length);
- //设置定时器,依次修改每个div边框的颜色.
- setTimeout(function show(){
- //重置上一个边框的颜色
- for (var i=0;i<allDivs.length;i++){
- allDivs[i].style.borderColor="#fff";
- allDivs[i].style.opacity=0.7;
- }
- //找到要修改的那个边框的颜色设置
- var currentPic=allDivs[setting.picIndex[setting.count%8]];
- currentPic.style.borderColor="red";
- currentPic.style.opacity=1.0;
- setting.count++;
- setting.delay+=2*setting.count;
- if(setting.count>setting.total){
- alert("您中奖了,哈哈");
- drawBtn.disable=false;
- return;
- }
- setTimeout(show,setting.delay);
- },setting.delay);
- }
- }
- </script>
- </head>
- <body>
- <div id="box">
- <div class="pic">1</div>
- <div class="pic">2</div>
- <div class="pic">3</div>
- <div class="pic">4</div>
- <div class="anniu"><input type="button" value="我要抽奖" id="drawBtn"/></div>
- <div class="pic">5</div>
- <div class="pic">6</div>
- <div class="pic">7</div>
- <div class="pic">8</div>
- </div>
- </body>
- </html>
来源: