<!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. codeforces914G Sum the Fibonacci

    题目大意:给定一个长为$n$($n\leq 10^6$)的序列S,定义一个合法的五元组$(a,b,c,d,e)$合法当且仅当 $$ ( S_a \mid S_b ) and S_c and ( S_d ...

  2. 点击Button调用另一个Dialog

    资源视图--Dialog--右键--添加资源--新建--对话框--然后在已经生成的对话框中(解决资源视图中的dialog下的新生成的那个)右键--添加类.例如:添加CMyNewDlg类,在所要调的代码 ...

  3. 第三课 go语言基础语法

    http://www.runoob.com/go/go-basic-syntax.html 1 行分隔符 在 Go 程序中,一行代表一个语句结束.每个语句不需要像 C 家族中的其它语言一样以分号 ; ...

  4. JWT(JSON WEB TOKEN) / oauth2 / SSL

    1: JWT: 为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景.JWT的声明一般被 ...

  5. Microsoft Data Access Components 2.8

    今天在安装金蝶系统的时候,发现这个组件无法安装上 此组件如果跳过,不安装,将会导致金蝶安装完毕后,提醒无法创建账套,也就是金蝶软件无法连接到数据库上,所以此步为必须. 于是乎,网上找这个组件,下载地址 ...

  6. maven可用镜像

    <mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> & ...

  7. windows、Linux 测试服务器、电脑的某些个端口是否打开

    测试远程端口是否开放包括两种方法: 一. 命令行的形式 二.代码 先参考我的博客 windows.Linux 开放端口 一.命令行的形式 两个命令:telnet.nc(netcat) 两种网络层协议: ...

  8. 树莓派 Learning 003 --- GPIO 001 --- 点亮LED

    树莓派 Learning 003 - GPIO 001 - 点亮LED 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 树莓派 Learni ...

  9. Hadoop Reducer个数设置

    在默认情况下,一个MapReduce Job如果不设置Reducer的个数,那么Reducer的个数为1.具体,可以通过JobConf.setNumReduceTasks(int numOfReduc ...

  10. JavaScript学习系列8 - JavaScript中的关系运算符

    JavaScript中有8个关系运算符,分别是 ===, !===, ==, !=, <, <=, >, >= 1. 恒等运算符 (===) ===也叫做 严格相等运算符,它要 ...