<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=GBK">
<title>××××××××</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
///
/**可选号码总数,即需要操作次数*/
var _MAX_NUM = 20;
/**更新号码的时间间隔,越小越快*/
var _SPEED = 10;
///
/**存储未被选中的号码*/
var m_oriNumArr = new Array();
for(var i=1;i<=_MAX_NUM;i++){
m_oriNumArr[i-1] = i;
}
/**存储已经产生的号码*/
var m_selNumArr = new Array();
/**每次开始选号的定时器编号*/
var m_timmerId = 0;
/**响应开始按钮*/
function startShow(){
//当前操作序号加1,开始按钮不可再点击,把光标(焦点)移到停止按钮
document.getElementById("seq").innerText = parseInt(document.getElementById("seq").innerText)+1;
document.getElementById("btnStart").disabled = true;
document.getElementById('btnEnd').focus();
//启动定时获取随机数
m_timmerId = window.setInterval(genRandomNum, _SPEED);
}
/**随机产生一个数组的索引,通过索引取得数组中的值并显示到页面的DIV中*/
function genRandomNum(){
var temp = parseInt(Math.random() * m_oriNumArr.length);
document.getElementById("divNum").innerText = m_oriNumArr[temp];
}
/**响应停止按钮*/
function endShow(){
if(m_timmerId == 0)return;//未点击开始按钮时不响应
//取消定时获取随机数
window.clearInterval(m_timmerId);
m_timmerId = 0;
//取得页面显示DIV中的值,存入已选数组
var selValue = parseInt(document.getElementById("divNum").innerText);
m_selNumArr.push(selValue);
//从原始数据中删除被选中的号码
remove(selValue);
//所有号码选完后开始按钮不再可用
if(m_selNumArr.length != _MAX_NUM){
document.getElementById("btnStart").disabled = false;
document.getElementById('btnStart').focus();
}else{//显示当前序号对应的号码
var vHtml = "";
for(var i=0;i<m_selNumArr.length;i++){
vHtml += (i+1)+" : "+m_selNumArr[i]+"<br>";
}
document.getElementById('divData').innerHTML = vHtml;
}
}
/**删除被选中的号码*/
function remove(vData){
if(m_oriNumArr.length == 0)return;//数组已经没有数据
//查找到选中号码的索引
var index = -1;
for(var i=0;i<m_oriNumArr.length;i++){
if(vData == m_oriNumArr[i]){
index = i;
}
}
if(-1 == index)return;//未找到不处理
//将最后一个号码调到选中号码所在位置,然后删除最后一个
m_oriNumArr[index] = m_oriNumArr[m_oriNumArr.length-1];
m_oriNumArr.length -= 1;
}
//-->
</SCRIPT>
</head>
<body onload="document.getElementById('btnStart').focus();">
<div align="center" id="divNum" style="font-size:300px;color:red;">0</div>
<div align="center">
第<span id="seq" style="font-size:30px;color:red;">0</span>个 <span id="seqName"></span>
<INPUT TYPE="button" id="btnStart" value="开 始" onclick="startShow();">
<INPUT TYPE="button" id="btnEnd" value="停 止" onclick="endShow();">
</div>
<div id="divData"></div>
</body>
</html>
转载于:https://my.oschina.net/h2do/blog/268097