<!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. hashicorp/consul

    https://github.com/hashicorp/consul/tree/master/vendor/github.com/boltdb/bolt

  2. C#深入浅出 继承（六）

    这个标题写出来好长时间了,都没写内容,今天无论如何都得写完它,昨天写了一段,尼玛,电脑突然死机,重启之后啥都没了. 继承嘛,有人觉得很简单,但是里面还是有内容可以讲的,因为面向对象也就这么点内容,封装 ...

  3. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（4）构造尺寸更灵活的背景

    相比传统的图片背景来说,使用CSS构造背景色不仅可以降低网络传输的开销,更由于其尺寸的可控性受到开发者的青睐. 如设计师设计了一张背景图片作为标题背景,如图5.18所示.对于用电脑浏览网页的用户来说, ...

  4. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Keepalived日志

    默认日志存放在系统日志:/var/log/messages下 [root@lb01 /]# tail -f /var/log/messages Oct :: lb01 Keepalived_vrrp[ ...

  6. SSI指令

    1.SSI定义 SSI是英文Server Side Includes的缩写, 即“服务器端包含”或“服务器端嵌入”技术. SSI在HTML文件中,可以通过注释行调用的命令或指针,是一种基于服务器端的网 ...

  7. ecshop常用二次开发修改

    修改ecshop支付宝的支付按钮  http://www.68ecshop.com/article-1081.html 去掉ecshop收货人信息页面的电子邮件必填和电话.手机选填一个  http:/ ...

  8. VC++ 一个简单的Log类

    在软件开发中,为程序建立Log日志是很必要的,它可以记录程序运行的状态以及出错信息,方便维护和调试. 下面实现了一个简单的Log类,使用非常简单,仅供参考. // CLogHelper.h : hea ...

  9. Cannot add Controls from 64-bit Assemblies to the Toolbox or Use in Designers Within the Visual Studio IDE

    原文地址:https://support.microsoft.com/en-us/kb/963017 Source: Microsoft Support RAPID PUBLISHING RAPID ...

  10. hadoop2的思想架构

    mapreduce 2 思想架构 mr2解决了mr1的jobTracker的单点颈瓶问题,这个问题会影响hadoop的扩展性,集群的可靠性,mr1中jobTracker负责集群作业的分发,管理,调度, ...