JavaScript三种方法模拟双色球抽奖——使用标记、使用Interval、使用Timeout

最新推荐文章于 2022-06-26 19:33:33 发布

最新推荐文章于 2022-06-26 19:33:33 发布 · 548 阅读

文章标签：

#前端 #javascript #xhtml #ViewUI

本文介绍三种方法用于模拟双色球抽奖过程，包括使用标记、Interval和Timeout技术，详细展示了每种方法的实现步骤及运行效果，并对三种方法进行了对比总结。

本文使用三种方法模拟双色球抽奖。

公共页面：

<!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="开始" onclick="control()"></td>
		<td colspan="2"><input style="height:35px;width:100px;" type="button" value="停止" onclick="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的使用

源码下载：点击此处。