h5 游戏黑白格

最新推荐文章于 2021-06-15 15:44:51 发布

心郎

最新推荐文章于 2021-06-15 15:44:51 发布

阅读量875

点赞数

分类专栏：前端_js_案例

本文链接：https://blog.csdn.net/u011301203/article/details/77528152

版权

前端_js_案例专栏收录该内容

22 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>有个bug你是否能帮助找出并修改 </title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="./css/base.css"/>
		<style>
			.move_info{
				height:5000px;
				width: 100%;
			}
			.move_info div{
				float: left;
				width: 33.33%;
			}
			.alert_box{
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				content: " ";
				z-index: 99;
				background-color: transparent;
			}
			.alert_num{
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				content: " ";
				z-index: 99;
				background-color: transparent;
			}
			.alert{
				width: 4rem;
				height: 1.5rem;
				line-height: 1.5rem;
				background-color: darkgoldenrod;
				position: fixed;
				top: 3rem;
				left: 1.8rem;
				text-align: center;
				border-radius: 10px;
			}
			.relase{
				width: 4rem;
				height: 1.5rem;
				line-height: 1.5rem;
				background-color: darkgoldenrod;
				position: fixed;
				top: 4.7rem;
				left: 1.8rem;
				text-align: center;
				border-radius: 10px;
			}
			.num{
				height: 4rem;
				width: 4rem;
				border-radius: 100%;
				line-height: 4rem;
				text-align: center;
				position: fixed;
				top: 3rem;
				left: 1.8rem;
				font-size: 60px;
				color: red;
			}
			.sumNum{
				width: 100%;
				height: 1rem;
				line-height: 1rem;
				background-color: indianred;
				position: fixed;
				top: 0;
				text-align: center;
				color: greenyellow;
				transform: translateY(-2rem);
			}
			.move{
				overflow: hidden;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				content: " ";
				background-color: transparent;
			}
		</style>
	</head>
	<body>
		
		<div class="move">
			<div class="move_info">
				<div class="A">
				</div>
				<div class="B">
				</div>
				<div class="C">
				</div>
			</div>
		</div>
		
		<div class="alert_box" style="display: none;">
			<div class="alert" >
				笨蛋只能点击白色
			</div>
			<div class="relase" οnclick="relase()">从新开始</div>
		</div>
		
		<!--倒计时-->
		<div class="alert_num" >
			<div class="num">4</div>
		</div>
		
		<div class="sumNum">当前分数：<span class="dj_num" style="font-size: 30px;">0</span> 分 </div>
		<script>
			
			var moveInfo = document.getElementsByClassName('move_info')[0];
			
			moveInfo.addEventListener('touchstart',function(){
				
			});
			
			var A = document.getElementsByClassName('A')[0];
			var B = document.getElementsByClassName('B')[0];
			var C = document.getElementsByClassName('C')[0];
			
			var sumNum = document.getElementsByClassName('sumNum')[0];
			var djNum = document.getElementsByClassName('dj_num')[0];
			
			var num = document.getElementsByClassName('num')[0];
			var alertNum = document.getElementsByClassName('alert_num')[0];
			
			
			var height = [3,2,3,4,5,6,4,3,4,5,3];
			var color = ['red','royalblue','darkgoldenrod','indianred','aquamarine','darkgrey','darkgreen','darkmagenta','greenyellow','darkturquoise','orange'];
			
			for(var i=1;i<10000;i++){
				for( var j=1;j<4;j++){
					var h = height[Math.round(Math.random()*9+1)];
					var bgc;
					var divString;
					if(parseInt(h)%2==0){
						divString = '<div class="line addEven" style="height:'+h+'rem;width: 100%;background-color: white;border: 1px solid darkgrey;" ></div>';
					}else{
						divString = '<div class="line line_'+j+'" style="height:'+h+'rem;width: 100%;background-color: black;border: 1px solid darkgrey;" οnclick="setStatus(this)"></div>';
					}
					
					if(j==1){
						A.insertAdjacentHTML('beforeend', divString);
					}else if(j==2){
						B.insertAdjacentHTML('beforeend', divString);
					}else if(j==3){
						C.insertAdjacentHTML('beforeend', divString);
					}
					
				}
			}
			
			//停止移动
			function setStatus(ele){
				var alert = document.getElementsByClassName('alert_box')[0];
				alert.style.display = 'block';
				moveInfo.style.cssText = 'transition-duration:3000000000000s;';
			}
			
			var addEven = document.getElementsByClassName('addEven');
			for(var z=0;z<addEven.length;z++){
				addEven[z].addEventListener('touchstart',function(even){
					var c = color[Math.round(Math.random()*9+1)];
					this.style.backgroundColor = c;
					var num = parseInt(djNum.innerHTML)+1;
					djNum.innerHTML = num;
				})
			}
			
			//重新开始
			function relase(){
				location.reload(true);   
			}
			
			//盒子向上移动
			function move(){
				moveInfo.style.cssText = 'transform: translateY(-50000px);transition-duration:70s;transition-timing-function:ease-in';
			}
			
			
			//倒计时
			var djsNum = 4;
			var clear = setInterval(function(){
				console.log(djsNum);
				num.innerHTML = djsNum;
				if(djsNum == 0){
					alertNum.style.display = 'none';
					move();
					clearInterval(clear);
					sumNum.style.cssText = 'transform: translateY(0rem);transition-duration:2s;';
				}
				djsNum--;
			},1000)
			
			
			
			
		</script>
		
		
	</body>
</html>

心郎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5 游戏黑白格

有个bug你是否能帮助找出并修改 .move_info{ height:5000px; width: 100%; } .move_info div{ float: left; width: 33.33%; } .alert_box{ position: fixed; top: 0; left:
复制链接

扫一扫