<!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>

javascript跑马灯抽奖的更多相关文章

  1. JavaScript “跑马灯”抽奖活动代码解析与优化（一）

    最近的项目中做了一个"跑马灯"的抽奖特效插件.上篇文章已经分享过html和css 的相关知识.这篇文章主要分享一些 JavaScript 相关的知识.这几天在写这篇文章的时候,也顺 ...

  2. JavaScript “跑马灯”抽奖活动代码解析与优化（二）

    既然是要编写插件.那么叫做"插件"的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率.那么叫做插件的东西应该具有哪些基本特征呢?让我们来总结一下: 1.J ...

  3. 原生js实现跑马灯抽奖效果

    目前好多的微信活动都有一些抽奖活动,其中就有跑马灯. <!DOCTYPE html> <html> <head> <title>跑马灯效果</ti ...

  4. javascript 跑马灯

    1.看了写跑马灯的教程案例,隔了段时间自己写了一个简单的跑马灯.将过程中遇到的问题特此记录下来 代码如下: <!DOCTYPE html> <html> <head> ...

  5. js抽奖，跑马灯

    分享自己写的跑马灯抽奖. HTML代码 <!--首先将一个div的背景设为一个圆形--> <div style=" width:240px; height:232px; b ...

  6. canvas九宫格跑马灯

    canvas九宫格跑马灯抽奖 之前用dom写了一版,部分 安卓机会卡顿,换用canvas dom版本九宫格抽奖

  7. js抽奖跑马灯程序

    js抽奖跑马灯程序 点击下载代码

  8. javascript小记五则：用JS写一个图片左右自由滚动的“跑马灯”效果

    之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...

  9. JavaScript小实例-文字跑马灯效果

    我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...

随机推荐

  1. 李洪强iOS开发之OC语言BLOCK和协议

    OC语言BLOCK和协议 一.BOLCK (一)简介 BLOCK是什么? 苹果推荐的类型,效率高,在运行中保存代码.用来封装和保存代码,有点像函数,BLOCK可以在任何时候执行. BOLCK和函数的相 ...

  2. Vimrc配置以及Vim的常用操作

    """"""""""""""""&quo ...

  3. POJ1118 Lining Up

    快弄死我了 最后的原因是abs和fabs的区别... 说点收获:1.cmp函数返回的是int,所以不要直接返回double相减的结果2.define inf 1e9和eps 1e-93.在整数相除得到 ...

  4. JavaScript中样式，方法 函数的应用

    JavaScript中一个字母都不能错,编写的时候他不报错,也不提示,只有在执行的时候才会提示错误位置 . 一.样式 .waring {background-color:yellow } .highl ...

  5. 【原创】Leetcode -- Reverse Linked List II -- 代码随笔（备忘）

    题目:Reverse Linked List II 题意:Reverse a linked list from position m to n. Do it in-place and in one-p ...

  6. 24个有用的PHP类库分享

    目前,PHP是用于Web开发的最流行的脚本语言.你可以在互联网上随手找到关于PHP大量资料,包括文档.教程.工具等等.PHP不仅是一种功能丰富的语言,它还能帮助开发人员轻松地创建更好的网络环境.为了进 ...

  7. wordCount程序中MapReduce工作过程分析

    Map处理的是一个纯文本.Mapper处理的数据是由InputFormat分解过的数据集,其中InputFormat的作用是将数据集切割成小数据集InputSplit,每一个InputSplit将由一 ...

  8. [POJ1330]Nearest Common Ancestors(LCA, 离线tarjan)

    题目链接:http://poj.org/problem?id=1330 题意就是求一组最近公共祖先,昨晚学了离线tarjan,今天来实现一下. 个人感觉tarjan算法是利用了dfs序和节点深度的关系 ...

  9. 待实践三：MVC3下 路由的测试 使用 RouteDebug.dll 来测试判断路由是否符合

    在需要进行测试路由是否匹配的项目中引用    RouteDebug.dll   并且在MVC的Global.asax里面加入一段代码   //下面这行代码一定是在 RegisterRoutes(Rou ...

  10. Java Web编程的主要组件技术——Servlet

    参考书籍:<J2EE开源编程精要15讲> Servlet是可以处理客户端传来的HTTP请求,并返回响应,由服务器端调用执行,有一定编写规范的Java类. 例如: package test; ...