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 新增分页功能. ...
随机推荐
- MSYS2的源配置
关于MSYS2的文章可以参考下面的链接,笔者不多赘述: msys2安装笔记 MSYS2 + MinGW-w64 + Git + gVim 环境配置 msys2环境搭建 msys2安装g++: pacm ...
- [SQL] SQL学习笔记之基础操作
1 SQL介绍 SQL 是用于访问和处理数据库的标准的计算机语言.关于SQL的具体介绍,我们通过回答如下三个问题来进行. SQL 是什么? SQL,指结构化查询语言,全称是 Structured Qu ...
- Shell入门教程：命令替换 $() 和 ``
所谓命令替换,是把命令执行后的标准输出放入变量中.这是一个十分有威力的功能.例如说, 想查看工作目录中所有的文件名,可执行ls命令,但如何把这些文件名存入变量中,供往后的程序代码再利用呢? 使用命令替 ...
- selenium常用的js总结
1. 对input执行输入 直接设置value属性, 此方法主要应对输入框自动补全以及readonly属性的element,sendkeys不稳定 比如: //inputbox is a WebEle ...
- “连接配置中心失败，将无法进行正常管理”--腾讯通RTX管理器
[故障现象]: 腾讯通RTX管理器提示“连接配置中心失败,将无法进行正常管理” [解决办法]: 在系统服务中启动“RTX_ConfigCenter”服务即可. 文章收集自网络
- xcode 消除警告
项目中引用大量的第三方代码时,这些代码很复杂,不要轻易去改动它,如果编译产生很多警告,该如何消除呢? 1. 最直接.最一劳永逸.最安全的方式,直接找到警告的那段代码,改为不警告.这个方式最安全. 可是 ...
- CDN -- 集合
weui https://cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.min.css 百度静态资源库 http://cdn.code.ba ...
- CUDA代码移植
如果CUDA的代码移植,一个是要 include文件夹对不对,这个是.h文件能否找到的关键,另一个就是lib,这个是.lib文件能否找到的关键.具体检查地方,见下头. include: lib:
- JQuery简单标签页实现
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- 支付宝通知页面notify_url、返回页面return_url
返回页面(return_url文件)工作原理 即:商户系统请求/支付宝响应交互模式 1. 构造请求数据 商户通过提供的接口代码示例,通过代码示例的规则,程序构造与运算得到sign加密结果以及构造后的 ...