<!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. 82. Remove Duplicates from Sorted List II

    题目: Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct  ...

  2. linux快速修改文件夹及文件下所有文件与文件夹权限

    分两部分改属主和权限: 更改权限,递归方式 chmod -R 755 /var/www/html/test.com 更改属主,递归 chown -R apache:apache /var/www/ht ...

  3. Android 线程通讯类Handler

    handler是线程通讯工具类.用于传递消息.它有两个队列: 1.消息队列 2.线程队列 消息队列使用sendMessage和HandleMessage的组合来发送和处理消息. 线程队列类似一段代码, ...

  4. 撤销 git reset --hard HEAD~1

    方法一: 1.先通过git reflog找到上一次的历史提交记录id,git如果没有特意设置,是会保存记录一段时间的(a few days or a month) 2.git reset --hard ...

  5. uva1638Pole Arrangement

    递推. 用f[n][l][r]表示n个柱子,从左面能看到l个,从右面能看到r个. 如果我们按照从小到大的顺序放置的话,放置最高的柱子后,大量状态都能递推到当前状态,很难写出递推式. 但是我们如果从小到 ...

  6. UVa 10285 Longest Run on a Snowboard【记忆化搜索】

    题意:和最长滑雪路径一样, #include<iostream> #include<cstdio> #include<cstring> #include <c ...

  7. GridView表头排序方法设置

    1.效果图 2.前台代码 说明:红色代码为核心代码 <asp:GridView ID="gvData" runat="server" AutoGenera ...

  8. HDU 5294 Tricks Device （最短路，最大流）

    题意:给一个无向图(连通的),张在第n个点,吴在第1个点,‘吴’只能通过最短路才能到达‘张’,两个问题:(1)张最少毁掉多少条边后,吴不可到达张(2)吴在张毁掉最多多少条边后仍能到达张. 思路:注意是 ...

  9. POJ 2942 Knights of the Round Table （点双连通分量）

    题意:多个骑士要开会,3人及以上才能凑一桌,其中部分人已经互相讨厌,肯定不坐在同一桌的相邻位置,而且一桌只能奇数个人才能开台.给出多个人的互相讨厌图,要求多少人开不成会(注:会议不要求同时进行,一个人 ...

  10. Java [Leetcode 125]Valid Palindrome

    题目描述: Given a string, determine if it is a palindrome, considering only alphanumeric characters and ...