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 ...
随机推荐
- 3.3 CCSprite 精灵详解
3.3.1 创建精灵常用的 4 种方式 (当然还有其他方式,只不过 这四种比较常用) //创建精灵常用的 4 种方式 CCSprite* spr1 = CCSprite::create(const c ...
- 如何在MySQl数据库中给已有的数据表添加自增ID？
由于使用MySQL数据库还没有多久的缘故,在搭建后台往数据库导入数据的时候发现新增的表单是没有自增id的,因次就有了上面这个问题. 解决方法 1.给某一张表先增加一个字段,这里我们就以node_tab ...
- 2017.10.2北京清北综合强化班DAY2
a[问题描述]你是能看到第一题的 friends呢. —— hja世界上没有什么比卖的这 贵弹丸三还令人绝 ...
- openfire服务器开发环境搭建
2017-07-26 更新:直接获取最新版源码,就不会报错了,而且可支持的插件多,老版本的openfire几乎没有可用的官方插件. 系统及软件环境: MAC OSX EI Capitan 10.11. ...
- Linux 系统通过 Squid 配置实现代理上网
本文转载自:https://help.aliyun.com/knowledge_detail/41342.html Squid 介绍 Squid 是一个缓存 Internet 数据的软件,其接收用户的 ...
- 使用python对文件夹里面所有代码行数进行统计。
统计目录下所有的代码个数和总行数. # -*- coding: utf-8 -*- # @Author : ydf import json import os from pathlib import ...
- JS中数组方法小总结
1.array.concat(item……) 返回:一个新数组 该方法产生一个新数组,它包含一份array的浅复制,并把一个或多个参数item附加在其后.如果参数item是一个数组,那么它的每个元素会 ...
- IIS7.0(虚拟机)发布MVC5程序出现Http403错误的解决方法.
近来,用MVC5开发自己的一个小网站.网上租用了一个小空间(虚拟主机),可选.net版本为2.0 3.0 3.5 4.0 ,上传网站 后发现是403错误.不能访问. 经与技术人员联系,把虚拟机更换到高 ...
- 【转】经典网文：追MM与设计模式
设计模式做为程序员的“内功心法”,越来越受到.net 社区的重视,这种变化是很可喜的,Java社区走在了我们的前面,但这种状况也许有一天会发生改变. 从追MM谈Java的23种设计模式1.FACT ...
- jQuery菜单，导航与标签页
一:导航 网站导航栏是网站导航的第一层导航结构,我们可以使用HTML和jQuery来创建类似flash的动画效果 一:下拉式菜单 法一: <!DOCTYPE html PUBLIC " ...