我要投稿

javascript随机抽签程序

js/jquery

2015-05-12 0 300

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>抽签程序</title>  
    <style type="text/css">  
    html, body{  
        padding:0px; margin:0px; font-size:12px;  
    }  
    body{  
        margin:50px;  
    }  
    #result{  
        height:20px; margin-bottom:10px;  
    }  
    #result div{  
        float:left; border:1px solid #006699; color:#c00; width:24px; height:20px; line-height:20px;  
        margin-right:15px; text-align:center;  
    }  
    #control div{  
        float:left; width:24px; height:20px; line-height:20px; border:1px solid #008800; color:#c00;  
        margin-right:20px; text-align:center;  
    }  
    </style>  
    <script type="text/javascript">  
    var arrData = [], timerID = 0;  
    <!--随机的范围>  
    for(var i = 1; i <=5; i++){  
        arrData[i - 1] = i;  
    }  
    function $(id){  
        return document.getElementById(id);  
    }  
    function Start(btn){  
        if(timerID > 0){  
            clearInterval(timerID);  
            timerID = 0;  
        }  
        if(arrData.length < 1){  
            alert("没有数据了!");  
            return;  
        }  
        if(btn.value == "开始"){  
            timerID = setInterval(function(){  
                $("num").index = parseInt(Math.random() * (arrData.length));  
                $("num").innerHTML = arrData[$("num").index];  
            }, 30);  
            btn.value = "暂停";  
        }else{  
            var div = document.createElement("div");  
            div.innerHTML = $("num").innerHTML;  
            $("result").appendChild(div);  
            arrData.splice($("num").index, 1);  
            btn.value = "开始";  
        }  
    }  
    window.onload = function(){  
        $("btnStart").focus();  
    };  
    </script>  
    </head>  
      
    <body>  
    <div id="result"></div><div style="clear:both; float:none"></div>  
    <div id="control">  
        <div id="num">0</div>  
        <input type="button" id="btnStart" value="开始" onclick="Start(this)" />  
    </div>  
    </body>  
    </html>

显示效果如下：可以将制定范围的数字不重复的输出。