<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>抽象系统</title>

     <style type="text/css">

     div{

         margin:20px auto;

         font-size: 20px;

         color:#f00;

         font-weight: bold;

         font-family: "微软雅黑";

         text-align: center;

     }

     .btnwrap{

         width:200px;

         margin:  auto;

     }

     button{

         width:80px;

         height:35px;

         font-size: 16px;

         border:1px solid #fff;

         border-radius:8px;

         background-color: #3983de;

         color:#fff;

         margin: 10px;

         float:left;

         outline: none;

     }

     .Over{

         background-color: #;

     }

     </style>

 </head>

 <body>

     <div id="info">开始抽奖</div>

     <div class="btnwrap">

         <button id="start">开 始</button>

         <button id="stop">停 止</button>

     </div>

     <script type="text/javascript">

         /**

          * 思路：1、首先定义变量。

          * 2、定义一个数组，存放抽奖数据

          * 3、定义一个函数。

          * @type {[type]}

          */

         (function(d){

             var info = d.getElementById('info'),

                 start= d.getElementById('start'),

                 stop = d.getElementById('stop'),

                 arr = ['笔记本','佳能相机','3000元现金','惠普笔记本','3000元','ipone5'],

                 time = null;

             function move(){

                 var l = arr.length;

                 var random = Math.floor(Math.random()*l);

                 info.innerHTML = arr[random];

             }

             start.onclick = function(){

                 clearInterval(time);

                 //不能定义var。

                 time = setInterval(move,1);

                 start.classList.add('Over');

             }

             stop.onclick = function(){

                 clearInterval(time);

                 start.classList.remove('Over');

                 alert(info.innerHTML);

             }

         })(document)

     </script>

 </body>

 </html>

js抽奖系统的更多相关文章

  1. JS组件系列——图片切换特效：简易抽奖系统

    前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的“SlotMachine组件”,浏览一遍下来,勾起了博主小时候满满的回忆.于是下定决定要研究下这么一个东西,不得不再次叹息开源社区的强大,原来 ...

  2. PPT图片双屏抽奖系统现场主要操作流程介绍

    目录 第一步:前期准备工作 第二步:现场预备与辅助展示工作 第三步:现场正式抽取工作 PPT图片双屏抽奖系统-现场抽奖视频实录 第一步:前期准备工作 把第二个步骤优化处理制作好的PPT文件 [图片.p ...

  3. 【小型系统】抽奖系统-使用Java Swing完成

    一.需求分析 1. 显示候选人照片和姓名. 2. 可以使用多种模式进行抽奖,包括一人单独抽奖.两人同时抽奖.三人同时抽奖. 3. 一个人可以在不同的批次的抽奖中获取一.二.三等奖,但是不能在同一批次抽 ...

  4. js抽奖跑马灯程序

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

  5. 04Vue.js路由系统

    Vue.js路由系统: https://pizzali.github.io/2018/10/28/Vue.js%E8%B7%AF%E7%94%B1%E7%B3%BB%E7%BB%9F/

  6. [C#]使用RabbitMQ模拟抽奖系统的例子

    背景:在实际的项目中,经常有客户需要做抽奖的活动,大部分的都是注册送产品.送红包这些需求.这都是有直接的利益效果,所以经常会遇见系统被盗刷的情况,每一次遇见这种项目的上线都是绷紧神经,客户又都喜欢在过 ...

  7. 10、Node.js模块系统

    ##################################################################################介绍Node.js模块系统为了让No ...

  8. 用Javascript轻松制作一套简单的抽奖系统

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"> <html> <head ...

  9. 基于Map的用户注册、登录、抽奖系统

    期望功能 方法设计 1.类的设计: 定义两个参与者的属性: private String username; private String userpassword; 2.注册方法: public v ...

随机推荐

  1. SQLite优化方法

    1.建表优化 SQLite的数据库本质文件读写操作,频繁操作打开和关闭是很耗时和浪费资源的: 优化方法事务机制: 这里要注意一点:事务的开启是要锁定DB的,其他对DB的写入操作都是无法成功的. db. ...

  2. Mule ESB学习【转-结合了网络上的一些资源】

    1.SOA标准之一:SCA架构思想 SOA在Java领域有两套标准:一个是SUN推出的JBI(没有得到BEA和IBM的承认),另外一个是:IBM和BEA等公司推出的SCA和SDO标准. JBI之关注J ...

  3. 用nginx搭建http/rtmp/hls协议的MP4/FLV流媒体服务器

    前前后后搭建了两三个星期,终于可以告一段落,nginx实在是有点强大.写一篇笔记来记录一下这个过程中的思路和解决方案. 一.搭建nginx平台: 基本是基于http://blog.csdn.net/x ...

  4. bzoj 1819: 电子字典 Trie

    题目: Description 人们在英文字典中查找某个单词的时候可能不知道该单词的完整拼法,而只知道该单词的一个错误的近似拼法,这时人们可能陷入困境,为了查找一个单词而浪费大量的时间.带有模糊查询功 ...

  5. 发布倒计时！JDK11为我们带来哪些新特性?

    今年7月底,JDK11已经进入了Rampdown Phase Two阶段,这标志着该版本所有特性已经被冻结,不会有新的JEP会加入版本中. 这一阶段将会修复P1–P2级BUG,之后,JDK11预定于今 ...

  6. 使用root直接安装python3.5.2

    操作系统:Centos7.4 不使用pyenv管理器直接进行编译安装3.5.2版本. 下载tgz的包,如果没有安装wget,请yum -y install wget 解压python包: 将解压后的包 ...

  7. Hibernate---Hql查询2---

    hibernate.cfg.xml配置: <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-configurati ...

  8. 【java并发编程艺术学习】（一）初衷、感想与笔记目录

    不忘初心,方得始终. 学习java编程这么长时间,自认为在项目功能需求开发中没啥问题,但是之前的几次面试和跟一些勤奋的或者小牛.大牛级别的人的接触中,才发现自己的无知与浅薄. 学习总得有个方向吧,现阶 ...

  9. #410(div2)B. Mike and strings

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  10. supervisor启动worker源码分析-worker.clj

    supervisor通过调用sync-processes函数来启动worker,关于sync-processes函数的详细分析请参见"storm启动supervisor源码分析-superv ...