<!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. c语言中static的用法

    1.static定义变量: 1).局部: a.静态局部变量在函数内部定义,生存期为整个源代码,但作用域与自动变量相同,只能在定义的函数里面使用.退出该函数后,虽然此变量还存在内存中,但不能使用. b. ...

  2. shell编程基础(2)---&&与||

    shell 编程重要的应用就是管理系统,对于管理系统中成千上万的程序而言,查询某个文件名是否存在,并且获取该文件名所指代文件基本信息是系统管理员的基本任务.shell命令可以很轻松的完成这项任务. # ...

  3. hadoop拾遗（三）---- 多种输入

    虽然一个MapReduce作业的输入可能包含多个输入文件(由文件glob.过滤器和路径组成),但所有文件都由同一个InputFormat和同一个Mapper来解释.然而,数据格式往往会随时间而演变,所 ...

  4. 如何写出优秀的研究论文 Chapter 1. How to Write an A+ Research Paper

    This Chapter outlines the logical steps to writing a good research paper. To achieve supreme excelle ...

  5. vmware shared holder 虚拟机设置共享目录

    1, 安装 vm-tools http://askubuntu.com/questions/29284/how-do-i-mount-shared-folders-win7-host-in-ubunt ...

  6. Could not write to output file 'c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\xx'

    1.清了C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files 2.给上述文件夹EveryOne和IIS_Use ...

  7. 24-语言入门-24-cigarettes

    题目地址: http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=94    描述Tom has many cigarettes. We hypoth ...

  8. C#中默认的修饰符

    参考自Default visibility for C# classes and members (fields, methods, etc)? Classes and structs that ar ...

  9. Android Things:Raspberry Pi 3 B 刷入 Android Things

    参考文章: http://www.andtuts.com/a-beginners-guide-to-raspberry-pi-3-b-and-android-things/?utm_source=An ...

  10. java8 十大新特性

    这篇文章是对Java 8中即将到来的改进做一个面向开发者的综合性的总结,JDK的这一特性将会在2013年9月份发布. 在写这篇文章的时候,Java 8的开发工作仍然在紧张有序的进行中,语言特新和API ...