键盘事件抽奖

keydowm：当用户按住键盘上的任意键就会触发，如果用户按住不放，就会重复触发。

keypress：当用户按住键盘上的任意字符建将就会触发，如果用户按住不放，就会重复触发。

keyup：当用户松开键盘按键时触发。

EVENT的keycode用于得到键盘对应键的键码值

一个很简单的抽奖系统，通过点击开始随机抽奖，点击停止按钮选中奖品。

html中的代码，首先构造结构

一共用了两个div，第一个div用来存放随机变化的奖品，初始状态就是“开始抽奖了”

第二个div放了两个span标签，用来放两个状态，开始和结束

这两个span标签将它们块化，变成块级元素，设置高和宽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lottery</title>
    <link rel="stylesheet" type="text/css" href="Lottery.css">
    <script type="text/javascript" src="Lottery.js"></script>
</head>
<body>
<div>
    <div id="title">开始抽奖了！</div>
<div id="button">
    <span id="start">开 始</span>
    <span id="end">停 止</span>
</div></div>
</body>
</html>
*{
    margin:0px;
    padding:0px;
}
#title{
    height: 30px;
    width: 200px;
    font-weight: sold;
    margin: 0px auto;
    color: #177;
    font-size:27px;
    line-height: 30px;
    padding-top: 30px;
}
#button{
    height: 20px;
    width: 240px;
    margin: 20px auto 0px;/*--实现div置于左右居中--*/
    
}
#button span{
   display: block;
   float: left;
   height: 20px;
   width: 60px;
   line-height: 20px;
   border-radius:7px; 
   background-color: blue;
   color: white;
   text-align:center; 
   font-family: "微软雅黑"；
   font-size:14px;/*--必须加上这一句margin-left才有用 --*/
   margin-left:20px;
   cursor: pointer;
}
cursor: pointer的作用是将鼠标设置成手形
将span设置为block，然后靠左浮动，控制ID为button的div的宽度，保证span的居中整齐

window.onload=function(){
var data=["200元优惠券","三星笔记本电脑","佳能照相机","50元现金奖励","苹果手机","小米手环","谢谢惠顾","健身卡"];
var title=document.getElementById("title");
var start=document.getElementById("start");
var end=document.getElementById("end");
var timer=null;
var flag=0;
start.onclick=play;
end.onclick=stop;
document.onkeyup=function(event) {
    event=event||window.event;
    if(event.keyCode==13){
    if(flag==0){
    play();
    flag=1;
    }
    else{
    stop();
    flag=0;
    }
}
}
function play(){
//event=event||window.event;
clearInterval(timer);
timer=setInterval(function(){
var random=Math.floor(Math.random()*8);
title.innerHTML=data[random];
},30);
start.style.background="#333";
}
function stop(){
    clearInterval(timer);//应该将timer在全局中声明一下，不然这里没有用
    start.style.background="blue";
}
}

大概思路：首先定义一个数组，通过产生随机数，找到随机数对应的数组中的元素，用innerHTML方法将div中的奖品改成通过随机数找到的数组元素

当鼠标点击开始时调用play函数，play函数为了避免多次点击时奖品切换时间越来越快，因为每点击一次就会重新开启一个定时器，所以在play函数开始执行定时器设置之前先清除原来的定时器。然后通过Math.random（）函数产生一个在0到1的随机数。通过对随机数的放大取正，将ID为title的内容改为数组中与随机数相对应的元素。然后将按键的颜色设为灰色，表示现在无法再重新开始，按键处于选中状态。
当按下停止时调用stop函数，清除定时器，停止运动。将开始按键的颜色设回原来的颜色。
对于键盘事件：因为回车按键在keyCode中对应的数值是13，keycode要和event一起使用。因为要设置为第一次按下回车键开始抽奖，再按下回车键抽奖结束。这个通过设置一个变量，令变量只有两个状态。上面的程序中设置为0和1，只有当变量为一时按下回车才开始抽奖，并且置此变量为1。再次按下时同理。
posted @ 2016-11-29 16:21  DD胡译丹  阅读(331)  评论(0)    收藏  举报