原生 js 双色球大乐透

最新推荐文章于 2023-02-08 20:02:18 发布

ppfxdj

最新推荐文章于 2023-02-08 20:02:18 发布

阅读量742

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/ppfxdj/article/details/94357280

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

在这里插入图片描述

原生js 实现见得的双色球

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		span{width:40px;height:40px;display:block;border-radius:40px;background:red;float:left;margin:5px;opacity:0.8;text-align:center;line-height:40px;color:#fff;font-size:28px;}
		#box>span:nth-child(7){background:blue;}
		button{margin-top:10px;margin-left:10px;width:70px;height:30px;}
	</style>
</head>
<body>
	<div id="box">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<button>双色球</button>
		<button>大乐透</button>
		<button>停止</button>
		<button>清空</button> 
	</div> 
	<script>
		var span = document.getElementsByTagName("span")
		,	btn = document.getElementsByTagName("button")
		,	arr = null
		,	brr = null
		,	timer = null;

		btn[0].onclick = function(){
			span[5].style.background = "red";
			if(timer){
				clearInterval(timer);
			}
			timer = setInterval("fn(6)",200);
		}
		//开始

		btn[1].onclick = function (){
			span[5].style.background = "blue";
			//解决再次点击开始时的bug
			if(timer){
				clearInterval(timer);
			}
			//定时执行
			timer = setInterval("fn(5)",200);
		}

		//停止
		btn[2].onclick = function(){
			clearInterval(timer);
		}
		//清空
		btn[3].onclick = qk;
		//获取val(5/6)个红球
		function fn(val){
			arr=[];
			//随机获取5个红球
			for(var i=0;i<val;i++){
				if(val == 5){
					var rand=Math.floor(Math.random()*35+1);
				}else{
					var rand=Math.floor(Math.random()*33+1);
				}
				
				if(arr.indexOf(rand) == -1){
					arr.push(rand);
				}else{
					i--;
				}
			}	
			//排序
			for(var i=0;i<arr.length;i++){
			 	for(var j=i+1;j<arr.length;j++){
			 		if(arr[i]>arr[j]){
				 		var temp=arr[i];
				 		arr[i]=arr[j];
				 		arr[j]=temp;
			 		}
			 	}
			 
			}
			if(val == 5){
				fn1(2);
			}else{
				fn1(1);
			}
		
	}
	//获取1/2个篮球
	function fn1(val){
		brr = [];
		//随机获取val个数字
		for(var i=0;i<val;i++){
			if(val == 2){
				var rand=Math.floor(Math.random()*13+1);
			}else{
				var rand=Math.floor(Math.random()*16+1);
			}
			
			if(brr.indexOf(rand) == -1){
				brr.push(rand)
			}else{
				i--;
			}
		}
		//排序
		for(var i=0;i<brr.length;i++){
			for(var j=i+1;j<brr.length;j++){
			 	if(brr[i]>brr[j]){
				 	var temp=brr[i];
				 	brr[i]=brr[j];
				 	brr[j]=temp;
			 	}
			 }
		}
		//将val个篮球brr压栈到arr;
		for(var i=0;i<brr.length;i++){
			arr.push(brr[i]);
		}
		//将arr中的7位数字写入span
		for(var i=0;i<span.length;i++){
			span[i].innerHTML=arr[i];
		}
	}
	function qk(){
		clearInterval(timer);
		for(var i=0;i<span.length;i++){
			span[i].innerHTML = "";
		}
	}
	</script> 
</body>
</html>

ppfxdj

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
原生 js 双色球大乐透

原生js 实现见得的双色球<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> span{width:40px;height:40px;display:block;...
复制链接

扫一扫