javascript隨機抽簽程序

jopen 9年前發布 | 6K 次閱讀 JavaScript 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    <html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <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>  </pre> 




 顯示效果如下：可以將制定范圍的數字不重復的輸出。
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！