javascript随机抽签程序
<!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> 显示效果如下：可以将制定范围的数字不重复的输出。
