键盘事件+鼠标事件_抽奖小平台(随机数)

分享一篇旧笔记。

输入开始范围和结束范围，结束获得随机数

---

附上两个求随机数的网址：

http://www.cnblogs.com/rexmzk/archive/2012/03/07/2384409.html

 

http://www.jb51.net/article/56019.htm

---

 

贴上代码：

html:

<div class="container">
            <div class="context" id="context">开始抽奖！</div>
                <div class="token">
                    开始号码：<input type="text" id="start_num" />
                    结束号码：<input type="text" id="stop_num" />
                </div>
            <span id="play">开&nbsp始</span>
            <span id="stop">停&nbsp止</span>
            <div class="clear_fix"></div>
        </div>

css:

<style>
*{
    padding: 0;
    margin: 0;
}
.container{
    width: 630px;
    height: 320px;
    margin:0 auto;
    text-align: center;
    color: red;
    border: 1px solid black;
    margin-top: 130px;
}
.context{
    font-size: 25px;
    font-family: "微软雅黑";
    font-weight: bold;
}
.token{
    margin-top:40px; 
}
.container>span{
    background: #4A708B;
    border-radius: 7px;
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    width: 80px;
    margin-top: 60px;
    cursor: pointer;
    color: #fff;
}
#play{
    margin-left: 210px;
}
#stop{
    margin-left: 45px;
}
.clear_fix{
    clear: both;
}
</style>

js:

<script>
//计时器的接收
var timer=null;
//标记键盘按下的动作
var flag =0;

window.onload = function(){
    var play = document.getElementById("play");
    var stop = document.getElementById("stop");
    //开始抽奖
    play.onclick = playFun;
    //结束抽奖
    stop.onclick = stopFun;
    //键盘事件
    document.onkeyup = function(event){
        var event = event || window.event;
        if(event.keyCode==13){
            if(flag==0){
                playFun();
            }
            else{
                stopFun();
            }
        }
    }
}

function playFun(){
    //获取输入的开始值和结束值（字符串）
    flag=1;
    var start_num = document.getElementById("start_num").value;
    var end_num = document.getElementById("stop_num").value;
    
    var context = document.getElementById("context");
    var play = document.getElementById("play");

    if(isNaN(start_num) || isNaN(end_num)){
        alert("开始和结束范围只能为数值，请重新输入！");
        return;
    }
    
    else if(start_num >= end_num){
        alert("开始值要小于结束值！")
        return;
    }

    //如果未输入值，默认范围
    else if(start_num == false || end_num == false){
        alert("未输入开始和结束范围，系统默认为：1-100");
        play.style.background="#A3A3A3";
        start_num = 1;
        end_num = 100;
    }
    else{
        play.style.background="#A3A3A3";
        //转换为整型，方便取随机数
        start_num = parseInt(start_num);
        end_num = parseInt(end_num);
        //避免重复按键计时器越来越快，在按键前先清空重复执行效果
        clearInterval(timer);
        //每过0.1秒重复执行
        timer = setInterval(function(){
            //获取随机数[start_num,end_num]
            var num = Math.floor(Math.random()*(end_num)+start_num);
            //改变值
            context.innerHTML=num;
        }, 100)
    
    }
    

}

function stopFun(){
    clearInterval(timer);
    flag=0;
    var play = document.getElementById("play");
    play.style.background="#4A708B";
}
</script>

 

效果展示：

 PS(键盘只做了按下ENTER的反应)

开始抽奖！

开始号码： 结束号码：

开 始 停 止

 

 

以上内容，如有错误请指出，不甚感激。