本文使用三种方法模拟双色球抽奖。
公共页面:
<!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=gb2312" />
<title>模拟双色球抽奖——不使用Interval和Timeout</title>
<style type="text/css">
.myStyle{
height:35px;
width:200px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<td><font size="2" color="blue">号码1</font></td>
<td><font size="2" color="black">号码2</font></td>
<td><font size="2" color="green">号码3</font></td>
<td><font size="4" color="red"><b>特殊号码</b></font></td>
</tr>
<tr>
<td><input style="color:blue;" class="myStyle" id="num1" type="text" value=""></td>
<td><input style="color:black;" class="myStyle" id="num2" type="text" value=""></td>
<td><input style="color:green;" class="myStyle" id="num3" type="text" value=""></td>
<td><input style="color:red;font-size:20pt;height:35px;width:200px;" id="num4" type="text" value=""></td>
</tr>
<tr>
<td colspan="2" align="right"><input style="height:35px;width:100px;" type="button" value="开始" οnclick="control()"></td>
<td colspan="2"><input style="height:35px;width:100px;" type="button" value="停止" οnclick="stop()"></td>
</tr>
<tr>
<td colspan="2" align="right">
<font size="4" color="red"><b>抽奖结果:</b></font>
</td>
<td colspan="2">
<input id="result" type="text" value="" class="myStyle">
</td>
<tr>
</table>
</body>
</html>
第一种方法:使用标记。
<script type="text/javascript">
var running = false;
//控制开始或者暂停
function control(){
if(document.getElementById("result").value == "changing") {
document.getElementById("result").value = "start";
running = false;
return;
}else if(document.getElementById("result").value == "stop"){
running = false;
return;
}else{
running = true;
start();
}
}
//
var num1;
var num2;
var num3;
var num4;
//开始抽奖
function start(){
if(running){
document.getElementById("result").value="changing";
num1 = parseInt(Math.random() * 10);
num2 = parseInt(Math.random() * 20);
num3 = parseInt(Math.random() * 30);
num4 = parseInt(Math.random() * 10);
document.getElementById('num1').value = num1;
document.getElementById('num2').value = num2;
document.getElementById('num3').value = num3;
document.getElementById('num4').value = num4;
document.getElementById('result').value = num1 + "" + num2 + "" + num3 + "" + num4;
}
}
//结束抽奖
function stop(){
document.getElementById("result").value="stop";
control();
var result = num1 + "" + num2 + "" + num3 + "" + num4;
document.getElementById('result').value = result;
alert("恭喜您!您的中奖号码是:" + result);
}
var myTime = setInterval("start()", 100);
</script>
第二种方法:使用Interval。
<script type="text/javascript">
//使用Interval
var timmerId = null;
var num1;
var num2;
var num3;
var num4;
function change(){
num1 = parseInt(Math.random() * 10);
num2 = parseInt(Math.random() * 20);
num3 = parseInt(Math.random() * 30);
num4 = parseInt(Math.random() * 10);
document.getElementById('num1').value = num1;
document.getElementById('num2').value = num2;
document.getElementById('num3').value = num3;
document.getElementById('num4').value = num4;
document.getElementById('result').value = num1 + "" + num2 + "" + num3 + "" + num4;
}
//开始抽奖
function start(){
timmerId = window.setInterval("change()", 100);
}
//结束抽奖
function stop(){
window.clearInterval(timmerId);
var result = num1 + "" + num2 + "" + num3 + "" + num4;
document.getElementById('result').value = result;
alert("恭喜您!您的中奖号码是:" + result);
}
</script>
第三种方法:使用Timeout。
<script type="text/javascript">
//使用Timeout
var timmerId = null;
var num1;
var num2;
var num3;
var num4;
function change(){
num1 = parseInt(Math.random() * 10);
num2 = parseInt(Math.random() * 20);
num3 = parseInt(Math.random() * 30);
num4 = parseInt(Math.random() * 10);
document.getElementById('num1').value = num1;
document.getElementById('num2').value = num2;
document.getElementById('num3').value = num3;
document.getElementById('num4').value = num4;
document.getElementById('result').value = num1 + "" + num2 + "" + num3 + "" + num4;
start();
}
//开始抽奖
function start(){
timmerId = window.setTimeout("change()", 100);
}
//结束抽奖
function stop(){
window.clearTimeout(timmerId);
var result = num1 + "" + num2 + "" + num3 + "" + num4;
document.getElementById('result').value = result;
alert("恭喜您!您的中奖号码是:" + result);
}
</script>
运行效果截图(界面有点丑,哈哈):
总结:
1.本文使用的三种方法均可达到相同的效果。核心就是随机函数和定时器函数。
2.第一种巧妙的使用了标记,点击开始或者停止后把控件的值改变,然后再进行判断,再进行相应的方法调用;第二种方法是定时器方法setInterval();和clearInterval();的使用,每隔一定的时间周期进行方法的调用;第三种方法是定时器方法setTimeout();和clearTimeout();的使用,由于只调用一次相应的方法,所以需要在产生随机数的方法里再次进行调用。
3.需要注意的是,定时器的方法需要配套使用。
4.第二种和第三种方法需要把页面上“停止”按钮的onclick改成"stop()"。
强烈推荐阅读:setTimeout和setInterval的使用
源码下载:点击此处。