javascript随机抽签程序

最新推荐文章于 2024-05-05 02:14:35 发布

eclipse_xu

最新推荐文章于 2024-05-05 02:14:35 发布

阅读量5.2k

点赞数 2

分类专栏：编程基础

本文链接：https://blog.csdn.net/eclipsexys/article/details/8290138

版权

编程基础专栏收录该内容

31 篇文章 1 订阅

订阅专栏

将下面的代码保存为html格式即可运行。

<!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="开始" οnclick="Start(this)" />
</div>
</body>
</html>

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