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 ...
随机推荐
- 判断浏览器是否支持css3属性或单位
1.用CSS.supports()方法 mark-zhq[3] //判断是否支持flex布局 var supportsFlex = CSS.supports("display", ...
- ffmpeg推流命令参数记录
列出我们本机的设备:ffmpeg -list_devices true -f dshow -i dummy .\ffmpeg -r 25 -f dshow -s 640*480 -i video=&q ...
- POJ2096Collecting Bugs(数学期望,概率DP)
问题: Ivan is fond of collecting. Unlike other people who collect post stamps, coins or other material ...
- ACM学习历程—POJ3565 Ants(最佳匹配KM算法)
Young naturalist Bill studies ants in school. His ants feed on plant-louses that live on apple trees ...
- 51nod 1149 Pi的递推式 组合数
题目大意: \(F(x) = 1 (0 \leq x < 4)\) \(F(x) = F(x-1) + F(x-\pi) (4 \leq x)\) 给定\(n\),求\(F(n)\) 题解: 我 ...
- 训练集、测试集loss容易出现的问题总结
train loss 不断下降,test loss不断下降:说明网络仍在学习; train loss 不断下降,test loss趋于不变:说明网络过拟合; train loss 趋于不变,test ...
- 逐步改用 IronPython 开发你的 ASP.NET 应用程序
IronPython for ASP.NET 的 CTP 已经发布有一段时间了,我们在看了官方提供的范例之后,相信对一个 ASP.NET 应用程序中完全使用 IronPython 开发还是有一些担心的 ...
- mysql 用户和存储过程相关命令
如何显示所有的存储过程?select `name` from mysql.proc where db='db_name' and `type`='procedure';orshow procedure ...
- 办公软件-Excel:Microsoft Office Excel 2003百科
ylbtech-办公软件-Excel:Microsoft Office Excel 2003百科 Microsoft® Office Excel 2003 是一种电子表格程序,可提供对于 XML 的支 ...
- HTTP 2 VS HTTP 1.1
提升H5应用加载速度的方式有很多,比如缓存.cdn加速.代码压缩合并和图片压缩等技术. 今天介绍的是HTTP 2.0