<!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. 什么是struts2？

    一.我对struts2的理解. 1.struts2 是一个按MVC模式设计放入web层框架,其实它就是一个servlet.这个servlet命名为ActionServlet,或者是它的一个子类.它的工 ...

  2. alias 命令

    功能说明:设置指令的别名. 语 法:alias[别名]=[指令名称] 参 数 :若不加任何参数,则列出目前所有的别名设置. 举    例 :ermao@lost-desktop:~$ alias    ...

  3. 项目用到异步加载头像LasyList

    package com.leo.proforjob; import android.content.Context; import android.graphics.drawable.Drawable ...

  4. JS代码片段：appendHTML 和 insertAdjacentHTML

    function appendHTML(container,html,position){ position =position || 'after'; var objE = document.cre ...

  5. ［转］useradd 与adduser的区别

    转自:Deit_Aaron的专栏 添加用户:useradd -m 用户名  然后设置密码  passwd 用户名 删除用户:userdel  -r  用户名 1. 在root权限下,useradd只是 ...

  6. spring+hibernate+Struts2 整合(全注解及注意事项)

    最近帮同学做毕设,一个物流管理系统,一个点餐系统,用注解开发起来还是很快的,就是刚开始搭环境费了点事,今天把物流管理系统的一部分跟环境都贴出来,有什么不足的,请大神不吝赐教. 1.结构如下 2.jar ...

  7. uva12230Crossing Rivers

    数学期望. 过每条河的时间的可能在[L/v,3*L/v]间均匀分布,数学期望为2*L/v. 然后在加上在陆上走的时间. #include<cstdio> #include<algor ...

  8. SQL Server索引怎么用

    什么是索引 拿汉语字典的目录页(索引)打比方:正如汉语字典中的汉字按页存放一样,SQL Server中的数据记录也是按页存放的,每页容量一般为4K .为了加快查找的速度,汉语字(词)典一般都有按拼音. ...

  9. UVALive 3661 Animal Run（最短路解最小割）

    题意:动物要逃跑,工作人员要截断从START(左上角)到END(右下角)的道路,每条边权表示拦截该条道路需要多少工作人员.问最少需要多少人才能完成拦截. 通俗地讲,就是把图一分为二所造成消耗的最小值. ...

  10. c& c++ enum

    1.为什么要用enum       写程序时,我们常常需要为某个对象关联一组可选alternative属性.例如,学生的成绩分A,B,C,D等,天气分sunny, cloudy, rainy等等.   ...