<!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平时小例子⑨(小型抽奖功能)的更多相关文章

  1. javascript平时小例子⑧(导航置顶效果)

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  2. javascript平时小例子⑦(鼠标跟随的div)

    <!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...

  3. javascript平时小例子⑥(简易计算器的制作)

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  4. javascript平时小例子⑤(投票效果的练习)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. javascript平时小例子④（setInterval使用2）

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  6. javascript平时小例子③（setInterval使用1）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. javascript平时小例子②（正则表达式验证邮箱）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>邮 ...

  8. javascript平时小例子①（移动的小div）

    css样式: #box{ width: 300px; height: 300px; background: deepskyblue; position: absolute; margin-right: ...

  9. lucene.net helper类 【结合盘古分词进行搜索的小例子（分页功能）】

      转自:http://blog.csdn.net/pukuimin1226/article/details/17558247 添加:2013-12-25 更新:2013-12-26 新增分页功能. ...

随机推荐

  1. JavaScript - 初识

    流程图分为顺序结构.选择结构.循环结构 引入JS的方式有1.使用外部的JS文件<script src="..."></script>2.使用标签直接嵌入网页 ...

  2. 微信公众平台自定义菜单新增扫一扫、发图片、发位置 LBS运作更便捷

    今天微信公众平台发布更新,自定义菜单新增扫一扫.发图片.发送位置等功能,这对于有意挖掘微信LBS服务的运营者来说更便捷了,订阅号不用返回微信界面就能扫图.发送图片.调用地理位置,用户体验更友好,自然也 ...

  3. JavaScript操作JSON的方法总结，JSON字符串转换为JSON对象

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  4. 【Go入门教程4】struct类型（struct的匿名字段）

    struct Go语言中,也和C或者其他语言一样,我们可以声明新的类型,作为其它类型的属性或字段的容器.例如,我们可以创建一个自定义类型person代表一个人的实体.这个实体拥有属性:姓名和年龄.这样 ...

  5. iOS开发——高级篇——iOS中常见的设计模式（MVC/单例/委托/观察者）

    关于设计模式这个问题,在网上也找过一些资料,下面是我自己总结的,分享给大家 如果你刚接触设计模式,我们有好消息告诉你!首先,多亏了Cocoa的构建方式,你已经使用了许多的设计模式以及被鼓励的最佳实践. ...

  6. java基本算法之冒泡排序

    冒泡排序:是一种较简单的排序算法.它会遍历若干次要排序的数列,每次遍历时,它都会从前往后依次的比较相邻两个数的大小:如果前者比后者大,则交换它们的位置.这样,一次遍历之后,最大的元素就在数列的末尾! ...

  7. jQuery插件写法总结以及面向对象方式写法总结

    前两个是jQuery插件,后面2个是以对象的形式开发,都类似. 写法一 (function($, window){ // 初始态定义 var _oDialogCollections = {}; // ...

  8. MySQL通过增加用户实现远程连接数据库

    命令行进入mysql.exe所在目录 mysql -uroot -padmin 例子: grant all privileges on *.* to joe@localhost identified ...

  9. 小议ARM寄存器

    ARM微处理器一共有37个32位寄存器,其中包括31个通用寄存器和6个状态寄存器,但是这些寄存处不能同时访问.但是通用寄存器R14 - R0 ,程序计数器PC(即R15),程序状态寄存器都是可以任何时 ...

  10. EXPORT_SYMBOL的使用

    转自:http://blog.csdn.net/cailiwei712/article/details/7998525 在查看内核驱动代码的时候会经常看到在一些函数后面总会跟EXPORT_SYMBOL ...