<!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. lintcode 中等题：Simplify Path 简化路径

    题目 简化路径 给定一个文档(Unix-style)的完全路径,请进行路径简化. 样例 "/home/", => "/home" "/a/./b ...

  2. ios APP屏幕快照尺寸

    苹果上传APP审核需要上传APP屏幕快照,分别有3.5寸,4寸,4.7寸,5.5寸,ipad五种图片,对应尺寸大小: 3.5寸:横坚屏 640*960 或960*640 4寸:横坚屏 640*1036 ...

  3. 用ISO C++实现自己的信号槽(Qt另类学习)

    qtc++objectsignalclassstring   目录(?)[-] Qt信号与槽 引入元对象系统 建立信号槽链接 信号的激活 槽的调用 全家福 零零散散写在后面 Q_OBJECT Conn ...

  4. ossec 常用命令及目录说明

    1. /var/www/html/analogi -> ossec 第三方的web界面的安装目录 [root@ossec-server ~]# cd /var/www/html/analogi/ ...

  5. BZOJ 2440 完全平方数（莫比乌斯-容斥原理）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2440 题意:给定K.求不是完全平方数(这里1不算完全平方数)的倍数的数字组成的数字集合S ...

  6. CSS在不同浏览器兼容问题,margin偏移/offset溢出等

    margin在垂直取值时取最大值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  7. poj 1185 炮兵阵地(三维状态压缩dP)

    题目:http://poj.org/problem?id=1185 思路: d[i][j][k]表示第i行的状态为第k个状态,第i-1行的状态为第j个状态的时候 的炮的数量. 1表示放大炮, 地形状态 ...

  8. bzoj1876: [SDOI2009]SuperGCD

    更相减损数. 上手就debug了3个小时,直接给我看哭了. 3个函数都写错了是什么感受? 乘2函数要从前往后乘,这样后面的数乘2进位以后不会干扰前面的数. 除2函数要从后往前除,这样前面的数借来的位不 ...

  9. UITableViewCell上的按钮点击事件处理

    转自:  http://www.aichengxu.com/view/42871 UITableViewCell上的按钮点击事件处理,有需要的朋友可以参考下. 今天突然做项目的时候,又遇到处理自定义的 ...

  10. HNOI2010弹飞绵羊

    不得不说块状数组好神奇的啊!这道题的标签可是splay的启发是合并(什么高大上的东西),竟然这么轻松的就解决了! var x,y,i,j,tot,n,m,ch:longint; f,k,l,bl,go ...