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

最新推荐文章于 2024-08-11 15:21:07 发布

Wentasy

最新推荐文章于 2024-08-11 15:21:07 发布

阅读量3k

点赞数 1

分类专栏： Java Web 文章标签： javascript function class button xhtml

本文链接：https://blog.csdn.net/justdb/article/details/7930421

版权

Java Web 专栏收录该内容

101 篇文章 1 订阅

订阅专栏

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

公共页面：

<!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的使用

源码下载：点击此处。