<!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. 判断浏览器是否支持css3属性或单位

    1.用CSS.supports()方法 mark-zhq[3] //判断是否支持flex布局 var supportsFlex = CSS.supports("display", ...

  2. ffmpeg推流命令参数记录

    列出我们本机的设备:ffmpeg -list_devices true -f dshow -i dummy .\ffmpeg -r 25 -f dshow -s 640*480 -i video=&q ...

  3. POJ2096Collecting Bugs（数学期望，概率DP）

    问题: Ivan is fond of collecting. Unlike other people who collect post stamps, coins or other material ...

  4. ACM学习历程—POJ3565 Ants（最佳匹配KM算法）

    Young naturalist Bill studies ants in school. His ants feed on plant-louses that live on apple trees ...

  5. 51nod 1149 Pi的递推式 组合数

    题目大意: \(F(x) = 1 (0 \leq x < 4)\) \(F(x) = F(x-1) + F(x-\pi) (4 \leq x)\) 给定\(n\),求\(F(n)\) 题解: 我 ...

  6. 训练集、测试集loss容易出现的问题总结

    train loss 不断下降,test loss不断下降:说明网络仍在学习; train loss 不断下降,test loss趋于不变:说明网络过拟合; train loss 趋于不变,test ...

  7. 逐步改用 IronPython 开发你的 ASP.NET 应用程序

    IronPython for ASP.NET 的 CTP 已经发布有一段时间了,我们在看了官方提供的范例之后,相信对一个 ASP.NET 应用程序中完全使用 IronPython 开发还是有一些担心的 ...

  8. mysql 用户和存储过程相关命令

    如何显示所有的存储过程?select `name` from mysql.proc where db='db_name' and `type`='procedure';orshow procedure ...

  9. 办公软件-Excel：Microsoft Office Excel 2003百科

    ylbtech-办公软件-Excel:Microsoft Office Excel 2003百科 Microsoft® Office Excel 2003 是一种电子表格程序,可提供对于 XML 的支 ...

  10. HTTP 2 VS HTTP 1.1

    提升H5应用加载速度的方式有很多,比如缓存.cdn加速.代码压缩合并和图片压缩等技术. 今天介绍的是HTTP 2.0