<!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. 编译器 cc、gcc、g++、CC 的区别

    gcc 是GNU Compiler Collection,原名为Gun C语言编译器,因为它原本只能处理C语言,但gcc很快地扩展,包含很多编译器(C.C++.Objective-C.Ada.Fort ...

  2. BlockingQueue 阻塞队列，很有用的一种

    BlockingQueue的核心方法:放入数据: offer(anObject):表示如果可能的话,将anObject加到BlockingQueue里,即如果BlockingQueue可以容纳, 则返 ...

  3. Hibernate参数一览表

    参考文章地址:http://www.blogjava.net/i369/articles/194855.html Hibernate 参数设置一览表 属性名 用途 hibernate.dialect ...

  4. c++ 类静态成员、非静态成员初始化

    1.静态成员初始化(不能在构造函数或初始化列表中初始化) 1.1 所有静态成员都可以在类定义之外初始化(通用),如下所示 class test { public: static int a; }; ; ...

  5. PHP之autoload理解

    举个例子就可以看懂了: 同一目录中有2个文件index.php和test.php,在test.php中定义一个test类. test.php <?php class test{ public f ...

  6. python的os模块

    1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 2.返回指定目录下的所有文件和目录名:os.listdir() 3.函数用来删除一个文件:os.remove() ...

  7. webstrom配置sass与less

    1.less 安装一个稳定版的node.[例如node-v4.4.4-x64] 然后直接在webstrom里导入那个lessc.cmd 2.sass 安装ruby. 安装完之后点开,Start那个安装 ...

  8. Mybatis在insert操作时返回主键

    今天在写项目的时候,遇到一个需求,就是在像数据库插入数据的时候,要保留插入数据的主键,以便后续进行级联时,可以将该主键作为另张表的外键. 但是在正常情况下我们使用插入语句返回的是int型,含义是影响该 ...

  9. 构建高可用ZooKeeper集群（转载）

    ZooKeeper 是 Apache 的一个顶级项目,为分布式应用提供高效.高可用的分布式协调服务,提供了诸如数据发布/订阅.负载均衡.命名服务.分布式协调/通知和分布式锁等分布式基础服务.由于 Zo ...

  10. 【安装Express】CentOS7 下安装NodeJs+Express+MongoDB+Redis

    上一篇介绍了一下怎么安装Nodejs,那么这一篇就说说怎么安装express,express有个中文站点非常非常方便,http://www.expressjs.com.cn/创建express框架的站 ...