android随机抽奖代码_基于JavaScript实现抽奖系统
用JavaScript实现一个简单的抽奖系统,有【开始】按钮和【停止】按钮。
功能:
- 点开始按钮开始抽奖,随机出现奖品名称;
- 点停止按钮即可停止抽奖;
- 按下回车键可切换开始抽奖和停止抽奖。
html代码:
创建html结构,最基础的要含有显示的奖品名称和开始、停止按钮。
抽奖系统
开 始
停 止
js主要代码片段:
首先,定义data数组,写入各奖品名称。并初始化timer定时器,和键盘事件状态flag(一开始状态为0,按下键盘变成1,再按键盘变成0,如此切换).
var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券'];
timer = null,
flag = 0;
定义开始抽奖函数playFun();
function playFun() {
var title = document.getElementById('title');
var play = document.getElementById('play');
//每次都先清除上一次的定时器任务,避免抽奖效果累加频率会越来越快
clearInterval(timer);
//定时器50毫秒触发一次
timer = setInterval(function(){
//获取奖品下标随机数
var random = Math.floor(Math.random() * data.length);
//显示随机的奖品名称
title.innerHTML = data[random];
}, 50);
//改变将开始按钮背景色
play.style.background = '#666';
}
定义停止抽奖函数stopFun();
function stopFun(){
//清除定时器即可结束抽奖
clearInterval(timer);
var play = document.getElementById('play');
//改变将停止按钮背景色
play.style.background = '#036';
}
按回车键切换抽奖状态事件;
document.onkeyup = function(event){
event = event || window.event;
//回车键键码为13
if (event.keyCode == 13) {
//如果状态flag值为0则开始抽奖,并把状态值改为1,否则停止抽奖并把状态值改为0
if (flag == 0){
playFun();
flag = 1;
}else{
stopFun();
flag = 0;
}
}
}
js完整代码:
var data = ['Phone7', 'Ipad', '三星笔记本', '佳能相机', '惠普打印机', '谢谢参与', '100元充值卡', '1000元超市购物券'],
timer = null, //定时器
flag = 0; //用于键盘事件状态标记
window.onload = function() {
var play = document.getElementById('play'),
stop = document.getElementById('stop');
// 开始抽奖
play.onclick = playFun;
stop.onclick = stopFun;
// 键盘事件
document.onkeyup = function(event) {
event = event || window.event;
if (event.keyCode == 13) {
if (flag == 0) {
playFun();
flag = 1;
} else {
stopFun();
flag = 0;
}
}
}
}
// 开始抽奖
function playFun() {
var title = document.getElementById('title');
var play = document.getElementById('play');
//每次都先清除上一次的定时器任务,避免抽奖效果累加频率会越来越快
clearInterval(timer);
timer = setInterval(function() {
var random = Math.floor(Math.random() * data.length);
title.innerHTML = data[random];
}, 50);
play.style.background = '#999';
}
//停止抽奖
function stopFun() {
clearInterval(timer);
var play = document.getElementById('play');
play.style.background = '#036';
}
css样式:
* {
margin: 0;
padding: 0;
}
.title {
font-size: 24px;
font-weight: bold;
width: 400px;
height: 70px;
margin: 0 auto;
padding-top: 30px;
text-align: center;
color: #f00;
}
.btns {
width: 190px;
height: 30px;
margin: 0 auto;
}
.btns span {
font-family: '微软雅黑';
font-size: 14px;
line-height: 27px;
display: block;
float: left;
width: 80px;
height: 27px;
margin-right: 10px;
cursor: pointer;
text-align: center;
color: #fff;
border: 1px solid #eee;
border-radius: 7px;
background: #036;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
android随机抽奖代码_基于JavaScript实现抽奖系统相关推荐
- js微信抢红包脚本代码_基于JavaScript实现微信抢红包功能
金额随机:额度在0.01和(剩余平均值*2)之间. 0){ let num = scramble(remainAmount,remainPeople); remainAmount = remainAm ...
- 网购图书java代码_基于JAVAEE网上购物系统(含源文件).doc
PAGE Page PAGE PageI PageI 新 乡 学 院 毕 业 论 文 论文题目 基于JAVAEE网上购物系统 院(系)名称 计算机与信息工程学院 专业名称 计算机应用技术 班 级 计算 ...
- html年会抽奖代码实例,基于JavaScript实现简单抽奖功能代码实例
为什么会做这个东西呢,纯属好玩,闲的 其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答 当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡 先来看看页面效果吧: 点击抽取 ...
- java个人理财代码_基于JavaEE的个人理财系统
[实例简介] 基于Java EE的个人理财系统,源码开放,完美运行 [实例截图] [核心代码] 09计科GB3班 ├── personal │ ├── src │ │ ├── applic ...
- 曼哈顿距离java实现_基于javascript实现获取最短路径算法代码实例
这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 ...
- java 抽奖系统源码_基于jsp的抽奖系统-JavaEE实现抽奖系统 - java项目源码
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的抽奖系统, 该项目可用各类java课程设计大作业中, 抽奖系统的系统架构分为前后台两部分, 最终实现在线上进行抽奖 ...
- 抽奖功能java开发_基于Java实现抽奖系统
摘要:这篇Java开发技术栏目下的"基于Java实现抽奖系统",介绍的技术点是"抽奖系统.Java.抽奖.基于.系统.实现",希望对大家开发技术学习和问题解决有 ...
- jquery打99乘法表_基于javascript实现九九乘法表
基于javascript实现九九乘法表 本文实例为大家分享了javascript实现九九乘法表的相关代码,具体内容如下 var sum=0; var wite; for (var i = 1; i & ...
- redis分布式锁java代码_基于redis实现分布式锁
" 在上一篇文章中介绍了动态配置定时任务,其中的原理跟spring 定时任务注解@Scheduled一样的,都是通过线程池和定义执行时间来控制.来思考一个问题,如果我们的定时任务在分布式微服 ...
最新文章
- 一天超2000次,阿里如何打响音视频超时空战役?
- 每日一皮:键盘未找到的窘境...
- 表情显示服务器异常,MySqlmoji表情引发的存储异常微信昵称
- chrome/chromium浏览器的Enter passwod to unlock your login keyring
- 使用mysql自带工具mysqlslap测试数据库性能
- 如何在 PyFlink 1.10 中自定义 Python UDF?
- Java工作笔记-使用fastjson把对象直接生成为Json
- AI 的下一个重大挑战:理解语言的细微差别
- QScrollArea滚动条
- 【回顾】手机淘宝推荐系统实战
- Zend 创始人欲创建 PHP 方言,暂名为 P++;鸿蒙 OS 面世;中国首个开源协议诞生 | 开发者周刊...
- kuangbin带你飞dp专题-基础dp
- mac使用nvm安装node进行多版本管理
- 智慧环境应急平台建设方案
- grub rescue救援模式的处理
- signature=8df1e41f626c2f25b2dd4e97b89cc127,来用百度密语吧!!!
- 微信公众号回复服务器参数错误,为什么微信文章网址在浏览器访问提示参数错误...
- html将页面分成四部分,将HTML页面拆分为定义的宽度和高度部分
- 果快服务器维护中 稍后再试,维护中什么意思?服务维护中是什么意思
- rfid android开发板,iTOP-6818开发板-Android4.4系统下RFID射频模块测试例程
热门文章
- excel表格显示无法连接服务器,打开工作簿时Excel总是提示包含无法更新的链接?...
- WhatsApp营销引流-SendWS拓客系统功能后台介绍(五):WhatsApp素材管理
- ROS安装与机器人环境配置总结
- js简单实现百度地图雷达探测效果
- web 前端签名插件_signature_pad插件实现电子签名功能
- wechat微信聊天记录两台电脑转移
- python在线课程价格-python课程价格
- 设计模式学习第二十二节 策略模式
- 04-mysql数据备份之mysqldump命令详解
- Shop项目--9. 清空购物车。cart.jsp