<!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>
显示效果如下：可以将制定范围的数字不重复的输出。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/8841.html