一个简单抽奖系统实现的笔记

Posted 2020-11-05 yuhuohonglian

        关于键盘事件的笔记
************************************************
1.键盘事件的分类：
    1.1 keyDown用户按下键盘任意按键触发。如果不放开，则会一直触发。
    1.2 keyPress 用户按下键盘字符键触发。如果不放开，也会一直触发。
    1.3 keyUp 用户放开任意键位之后触发
2.抽奖事件的本质：
    奖品事先设置好，放在一个数组中。由random随机函数获得一个随机数调取数组中的数据，然后以innerhtml放入相应的位置。
3.一些功能的实现方法：
    3.1使用回车键控制开启和结束。
        方法：添加键盘事件，当键盘事件触发时，使用keyCode获取被触发的键位，如果键值是回车键键值，那么调用开始或者结束函数。
            这里应该注意，调用回车键时候，应该给定一个计数器，用于判断当前抽奖事件的状态，从而判断此时应该调用开始还是结束。
4.事件中应该注意的BUG：
    3.1 重复点击时，视觉上奖品刷新的频率大大提高。
        BUG原因：我们实现随机是给了按钮一个鼠标点击事件，当重复点击时，开启了不止一个事件。并且点击时有时间差，不同事件间
    不会完全重复。所以在视觉上随机频率加快了，而实质上是多个事件叠加的结果。
        解决办法：在开启事件前，先清除掉计时器；
5。完整JS代码：
    var data=[‘奖品1‘,‘奖品2‘,‘奖品3‘,‘谢谢参与‘],
    timer=null;
window.onload=function(){
    var play=document.getElementById(‘play‘),
        end=document.getElementById(‘end‘);
//开始抽奖，鼠标点击事件
play.onclick=playFunction();
//停止抽奖
end.onclick=stopFunction();
//键盘事件
document.onkeyup=function(event){
    event=event||window.event;
    //用于判断回车时抽奖的状态
    var count=0;
    if(event.keyCode==13){
        if(count=0){
            playFunction();
            count=1;
        }else{
            stopFunction();
            count=0;
        }
}
}
//抽奖函数
function playFunction(){
    var title=document.getElementById(‘title‘),
        play=document.getElementById(‘play‘)；
    clearInterval(timer);//防止重复点击导致抽奖速度越来越快（开启多个抽奖，视觉上变快）
    timer=setInterval(function(){
        var random=Math.floor(random()*data.length);
        title.innerHTML=data[random];
    },50);
    play.style.backgroundColor=#AAA;
}
//停止抽奖函数
function stopFunction(){
    clearInterval(timer);
    var play=document.getElementById("play");
    play.style.backgroundColor=#036;
}