javascript平时小例子⑨(小型抽奖功能)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>抽奖活动</title>
<style>
* {
margin: 0;
padding: 0;
}
#title {
color: red;
text-align: center;
margin: 0 auto;
width: 240px;
height: 70px;
padding-top: 10px;
background: opacity(0);
}
.btns {
width: 190px;
height: 30px;
margin: 0px auto;
}
.btns span {
display: block;
float: left;
width: 80px;
height: 28px;
text-align: center;
background: #036;
color: #fff;
cursor: pointer;
border: 1px solid #eee;
border-radius: 8px;
font-family: "微软雅黑";
font-size: 14px;
line-height: 28px;
margin-right: 10px;
}
#txt {
font-size: 14px;
color: #ccc999;
text-align: center;
margin: 0 auto;
width: 190px;
height: 50px;
padding-top: 10px;
}
</style>
<script>
var mytype = ["iPhone6s", "iPad Air2", "DELL外星人", "键鼠套装", "1000元超市购物卡", "200元话费充值卡", "谢谢参与", "品牌耳机", "港澳台7日游", "50元优惠券"], //定义奖品池
timer = null,
count = 0;
//加载时触发
window.onload = function() {
var start = document.getElementById("start");
var stop = document.getElementById("stop");
start.onclick = startFun; //这个函数后面加括号，就直接调用了该函数，所以不要加
stop.onclick = stopFun;
//绑定键盘事件
document.onkeyup = function(e) {
e = e || window.event;
if(e.keyCode == 13) {
if(count == 0) {
startFun();
count = 1;
} else {
stopFun();
count = 0;
}
}
}
}
//点击开始，标题栏开始轮动
function startFun() {
clearInterval(timer); //开始时，清除计时器，避免二次触发
var title = document.getElementById("title");
var start = document.getElementById("start");
timer = setInterval(function() {
var num = Math.floor(Math.random() * mytype.length);
title.innerHTML = mytype[num];
}, 50);
start.style.background = "#ccc";
}
//点击停止，标题栏停止轮动并输出轮动结果
function stopFun() {
var start = document.getElementById("start"),
txt = document.getElementById("txt"),
title = document.getElementById("title");
clearInterval(timer); //清除计时器，停止计时器
start.style.background = "#036";
}
</script>
<body>
<div>
<h2 id="title">开始抽奖！</h2>
</div>
<div class="btns">
<span id="start">开始</span>
<span id="stop">停止</span>
</div>
<div id="txt">支持回车键(Enter)开始/停止。</div>
</body>
</html>
javascript平时小例子⑨(小型抽奖功能)的更多相关文章
- javascript平时小例子⑧(导航置顶效果)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- javascript平时小例子⑦(鼠标跟随的div)
<!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...
- javascript平时小例子⑥(简易计算器的制作)
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- javascript平时小例子⑤(投票效果的练习)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- javascript平时小例子④（setInterval使用2）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- javascript平时小例子③（setInterval使用1）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- javascript平时小例子②（正则表达式验证邮箱）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>邮 ...
- javascript平时小例子①（移动的小div）
css样式: #box{ width: 300px; height: 300px; background: deepskyblue; position: absolute; margin-right: ...
- lucene.net helper类 【结合盘古分词进行搜索的小例子（分页功能）】
转自:http://blog.csdn.net/pukuimin1226/article/details/17558247 添加:2013-12-25 更新:2013-12-26 新增分页功能. ...
随机推荐
- R语言进行数据预处理wranging
R语言进行数据预处理wranging li_volleyball 2016年3月22日 data wrangling with R packages:tidyr dplyr Ground rules ...
- Ulink2 "No Ulink Device found" 解决办法
一.背景 keil使用ULINK2调试的时候,提示 "No Ulink Device found", "error: flash download failed - Ta ...
- 如何撤销 PhpStorm/Clion 等 JetBrains 产品的 “Mark as Plain Text” 操作 ?
当把某个文件“Mark as Plain Text”时,该文件被当做普通文本,就不会有“代码自动完成提示”功能,如下图所示: 但是呢,右键菜单中貌似没有 相应的撤销 操作, 即使是把它删除,再新建一个 ...
- MySQL Cluster 集群简介
简介 MySQL集群是一种在无共享架构(SNA,Share Nothing Architecture)系统里应用内存数据库集群的技术.这种无共享的架构可以使得系统使用低廉的硬件获取高的可扩展性. My ...
- C段渗透攻击必看的技术知识
假设想攻击的主机IP是:61.139.1.79 同一子网下我们已有权限的主机IP是:61.139.1.88并可以3389登陆 第一步: tracert 61.139.1.1 C:\WIN200 ...
- C#静态常量和动态常量的区别
C#拥有两种不同的常量:静态常量(compile-time constants)和动态常量(runtime constants).它们有不同的特性,错误的使用不仅会损失效率,还可能造成错误.相比之下 ...
- java3
1:在定义Long或者Float类型变量的时候,要加L或者f. 整数默认是int类型,浮点数默认是double. byte,short在定义的时候,他们接收的其实是一个int类型的值. 这个是自己做了 ...
- ACM-ICPC如何起步
刚刚绝定投身ACM-ICPC的同学先要过两关. 第一关:程序设计语言 如果学校有开设相关课程,则省去了很多麻烦.如果没有则可以选择<程序设计导引及在线实践>作为教材.现在的比赛中允许使用的 ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室 实战系列
ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(零) 前言 http://www.cnblogs.com/panzi/p/5742089.html ASP.NET S ...
- (转)Oracle 获取上周一到周末日期的查询sql语句
-- Oracle 取上周一到周末的sql -- 这样取的是 在一周内第几天,是以周日为开始的 select to_char(to_date('20130906','yyyymmdd'),'d') f ...