js抽奖系统
<!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抽奖系统的更多相关文章
- JS组件系列——图片切换特效:简易抽奖系统
前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的“SlotMachine组件”,浏览一遍下来,勾起了博主小时候满满的回忆.于是下定决定要研究下这么一个东西,不得不再次叹息开源社区的强大,原来 ...
- PPT图片双屏抽奖系统现场主要操作流程介绍
目录 第一步:前期准备工作 第二步:现场预备与辅助展示工作 第三步:现场正式抽取工作 PPT图片双屏抽奖系统-现场抽奖视频实录 第一步:前期准备工作 把第二个步骤优化处理制作好的PPT文件 [图片.p ...
- 【小型系统】抽奖系统-使用Java Swing完成
一.需求分析 1. 显示候选人照片和姓名. 2. 可以使用多种模式进行抽奖,包括一人单独抽奖.两人同时抽奖.三人同时抽奖. 3. 一个人可以在不同的批次的抽奖中获取一.二.三等奖,但是不能在同一批次抽 ...
- js抽奖跑马灯程序
js抽奖跑马灯程序 点击下载代码
- 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/
- [C#]使用RabbitMQ模拟抽奖系统的例子
背景:在实际的项目中,经常有客户需要做抽奖的活动,大部分的都是注册送产品.送红包这些需求.这都是有直接的利益效果,所以经常会遇见系统被盗刷的情况,每一次遇见这种项目的上线都是绷紧神经,客户又都喜欢在过 ...
- 10、Node.js模块系统
##################################################################################介绍Node.js模块系统为了让No ...
- 用Javascript轻松制作一套简单的抽奖系统
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"> <html> <head ...
- 基于Map的用户注册、登录、抽奖系统
期望功能 方法设计 1.类的设计: 定义两个参与者的属性: private String username; private String userpassword; 2.注册方法: public v ...
随机推荐
- QT之在QML中使用C++类和对象
QML其实是对ECMAScript的扩展,融合了Qt object系统,它是一种新的解释性语言,QML引擎虽然由Qt C++实现,但QML对象的运行环境说到底和C++对象的上下文环境是不通的,是平行的 ...
- ACM学习历程—POJ3090 Visible Lattice Points(容斥原理 || 莫比乌斯)
Description A lattice point (x, y) in the first quadrant (x and y are integers greater than or equal ...
- 洛谷【P3379】【模板】最近公共祖先(LCA)
浅谈\(RMQ\):https://www.cnblogs.com/AKMer/p/10128219.html 题目传送门:https://www.luogu.org/problemnew/show/ ...
- 51nod 1301 集合异或和——异或dp
题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1301 好题!看了TJ才会. 因为是不可重集合,所以当然有前 i 个 ...
- IAR常用快捷键及技巧
1.复制和粘贴几行的部分代码 需求:有时候我们需要复制几行代码的后半部分,不需要复制前半部分.方法:按住Alt键,再用鼠标拖动就可以复制和粘贴后半部分 [END/2015-09-23] 2.复制一行 ...
- HDOJ5044(最近公共祖先)
#include<cstdio> #include<cstring> using namespace std; ; struct Edge{ int v,id,next; }e ...
- HDOJ1272(并查集,判断是否为树)
0 0 Yes 1 1 0 0 Yes 1 2 2 1 0 0 No //自回路不算一条边的! 居然有 0 0 这样的测试数据 #include<iostream> #include< ...
- 【转】 Pro Android学习笔记(七二):HTTP服务(6):HttpURLConnection
目录(?)[-] Http Get的使用方式 基础小例子 Cookie的使用 重定向 HTTP POST的小例子 基础小例子 文章转载只能用于非商业性质,且不能带有虚拟货币.积分.注册等附加条件,转载 ...
- 图解Stm32使用jlink下载程序时jtag接口(SW和JTAG模式)的简化方法
转自: http://www.it165.net/embed/html/201308/2332.html 用过stm32的人都知道stm32有两种常用下载程序的方法,用串口和jlink.串口下载方法和 ...
- 实现reentrantlock和读写锁
1 可以手动实现一个类似reentrantlock的工具,首先要维护一个state的标志,代表当前是否有线程已经使用资源.线程lock的时候, 会用cas给state加1,其他线程检测状态.另外需要维 ...