js：双色球

最新推荐文章于 2024-07-11 02:19:56 发布

fairy_FF

最新推荐文章于 2024-07-11 02:19:56 发布

阅读量415

点赞数

本文链接：https://blog.csdn.net/fairy_FF/article/details/82024072

版权

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.redball{
				width: 60px;
				height: 60px;
				border: 1px solid red;
				border-radius: 30px;
				color: white;
				background-color: red;
				float: left;
				font-size: 30px;
				margin: 0 10px;
				text-align: center;
				line-height: 60px;
			}
			#ball6{
				width: 60px;
				height: 60px;
				border: 1px solid blue;
				border-radius: 30px;
				color: white;
				background-color: blue;
				float: left;
				font-size: 30px;
				margin: 0 10px;
				text-align: center;
				line-height: 60px;
			}
			button{
				width: 60px;
				height: 60px;
				float: left;
				margin: 0 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="redball" id="ball0"></div>
			<div class="redball" id="ball1"></div>
			<div class="redball" id="ball2"></div>
			<div class="redball" id="ball3"></div>
			<div class="redball" id="ball4"></div>
			<div class="redball" id="ball5"></div>
			<div id="ball6"></div>
			<button id="start" onclick="start()">start</button>
			<button id="stop" onclick="stop()">stop</button>
		</div>
		
		<script>
			var timer;
			function fun(){
				var nums=[];
				for(var i=0;i<6;i++){
					var reds=Math.ceil(Math.random()*33);
					if(ischeck(reds,nums)){
						document.getElementById("ball"+i).innerHTML=reds;
						nums.push(reds);
					}
					else{
						i--;
					}
				}
				var blue=Math.ceil(Math.random()*16);
				document.getElementById("ball6").innerHTML=blue;
			}
//			判断是否重复
			function ischeck(reds,nums){ 
				for(var i = 0;i<nums.length;i++){
					if(reds == nums[i]){
						return false;
						break;
					}
				}
				return true;
			}
//			定时器
			function start(){
				timer=setInterval(fun,100);
			}
//			清除定时器
			function stop(){
				clearInterval(timer);
			}
		</script>
		
	
	</body>
</html>

运行结果如图：