HTML练习

最新推荐文章于 2024-08-23 20:19:03 发布

weixin_57357165

最新推荐文章于 2024-08-23 20:19:03 发布

阅读量124

点赞数

分类专栏： Java Script 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_57357165/article/details/125161979

版权

Java Script 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

打地鼠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
	.pic{
		width: 409px;
		height: 504px;
		border: 1px solid green;
		margin: auto;
		
	}
		.pic div {
			width: 65px;
			height: 65px;
			border: 1px solid black;
			padding: 2px;
			margin: 15px;
			float: left;
			background: url(img/00.jpg);
		}
		.butt{
			width: 100px;
			height: 30px;
			
		}
		.view{
			width: 300px;
			height: 100px;
			border:1px solid red;
			margin: auto;
		}
		 .pic div img{
			display: none;
		} 
		.ddiv{
			width: 200px;
			height: 154px;
			border: 1px solid #6495ED;
			margin: auto;
			text-align: center;
			position: absolute;
			background-color: #6495ED;
			top: 20%;
			left: 50%;
			margin-left:-100px ;
			display: none;
		}
		
	</style>
	<body>
		<div class="pic" id="pic">
			
			 <!-- <div style=display:none class='nei' id='pico' value='1'><img src='img/01.jpg'></div> -->
		</div><div class="view">
		
		
		<span id='fen'>积分:0分</span><br>
		<span id='hour'>计时:0秒</span><br>
		<input id="start" type="button" class="butt"  value="开始" onclick="star()"/>
		<input id="eend" type="button" class="butt"  value="结束" onclick="end()"/></div>
		<div id='jie' class="ddiv">
				游戏结束
			</div>
	</body>
	<script type="text/javascript">
	/* 默认定义所有图片不显示 */
	let cc=0;
	let mytime=0;
	var c=0;
	var aa=0;
	for(let i=0;i<20;i++){//使用循环自动添加元素
		document.getElementById('pic').innerHTML+='<div><img id="img'+i+'" src="img/01.jpg"  onclick="Mouse(this)"/></div>';
		}
		function star(){//定义star按钮 用户使用 并且只要用户点击后 就立马禁用防止多次点击 被'玩坏'
		document.getElementById('jie').style.display="none";
				document.getElementById('start').disabled=true;
			 c=0;/* 使用定时函数   创建匿名函数    定义时间 每毫秒刷新  并且每秒赋值给计时器  使用toFixed函数截取小数后两位*/
			mytime=setInterval(function(){
				c+=0.1;
				document.getElementById('hour').innerHTML="计时:"+(c.toFixed(2))+"秒";
				/* 判断如果时间大于20秒游戏自动结束  调用clearInterval函数进行关闭各个定时函数*/
				if(c>20){
					aa=0;
					c=0;
	                clearInterval(mytime)
	                clearInterval(cc)
					document.getElementById('jie').style.display="block";
					document.getElementById('eend').disabled=true;
					document.getElementById('start').disabled=false;
                             };
			                                      },110);
/* 使用定时函数 + 匿名函数  定义随机数生成 然后自定义拼接 id='img'+随机到的数 然后拼接给document.getElementById()将拼接的id传入
 然后根据传入的值获取的值对其赋予显示图片的style方法   然后定义定时函数(只执行一次的) 给予时间值 让其过段时间就自动关闭 */
		   cc=setInterval(function(){
			let num=parseInt(Math.random()*20);
			let id='img'+num;
			let img=document.getElementById(id);
			img.style.display="block";
				setTimeout(function(){
		       img.style.display="none";
			    img.src="img/01.jpg";	
	                                  },2000);
			
	              },1000);
			

};
/* 创建关闭定时函数的函数 用户点击释放 */
function end(){
	aa=0;
	c=0;
	clearInterval(mytime);
	clearInterval(cc);
	
	document.getElementById('jie').style.display="block";
	if(document.getElementById('start').disabled==true){
		document.getElementById('start').disabled=false;};
	for(let i=0;i<20;i++){//使用循环自动添加元素
	var dde='img'+i;
	console.log(dde);
		document.getElementById(dde).style.display="none";
		}};
/* 创建用户点击图片加分效果 使用特殊点记录  如果为此值 则定义的数值记录加分 并且放置用户多次点击 将 图片更改  判断用户如果获得分数等于10分则结束游戏 */

var abc=0;
	function Mouse(obj){
	var sr=obj.src;
	//http://127.0.0.1:8848/javaee/img/01.jpg
	
	abc=sr.substr(sr.lastIndexOf('01'),2);
	console.log(abc);
	if(abc==01){
		aa+=1;
		document.getElementById('fen').innerHTML="积分:"+(aa)+"分";
		obj.src="img/02.jpg";
	}
	if(aa==10){
		aa=0;
		c=0;
		
		clearInterval(mytime)
		clearInterval(cc)
		document.getElementById('jie').style.display="block";
		document.getElementById('eend').disabled=true;
		document.getElementById('start').disabled=false;
	};
}

	
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		/* 定义空间 */
		.one{
			width: 500px;
			height: 500px;
			border: 1px solid green;
		}
		.one>div{
			width: 65px;
			height: 65px;
			border: 1px solid black;
			padding: 2px;
			margin: 15px;
			float: left;
			background: url(img/00.jpg);
		}
		.two{
			width: 200px;
			height:50px;
			border: 2px solid black;
		}
		 div >img{
			display: none;
		}
		.gg{
			width: 280px;
			height: 200px;
			border: 1px solid black;
			position: absolute;
			top: 19%;
			left: 6%;
			margin-left: -100px;
			background-image: url(img/gameover.jpg);
			display: none;
		}
		
	</style>
	<body>
		<!-- 创建表格 -->
		<div class="one"id="one"></div>
		<div class='two'>
			<div id="fen">积分:0分</div>
			<div id="miao">计时:0s</div>
			</div><input type="button" name="" id="starr" value="开始" onclick="star()" />
			<input type="button" name="" id="" value="结束" onclick="end()"/>
			<div class="gg" id='dis'>
				游戏结束
			</div>
		
		
	</body>
	<script type="text/javascript">
	var ss=0;
	var game=0;
	var gam=0;
	/* 使用for循环添加模块 */
		for(let i=0;i<20;i++){
			document.getElementById('one').innerHTML+="<div id='pic'><img id=img"+(i)+" src='img/01.jpg' onclick=Mouse(this)></div>";
		}
		/* 创建开始方法  首先定义一个随机获取图片id的random  然后进行拼接查找  定义匿名函数 每秒刷新  再定义消失函数 '注'需要定义在及时函数内*/
		
		/* console.log(num); */
		   
		function star(){
			document.getElementById('starr').disabled=true;
			/* 定义计时器  使用fix分割*/
			gam=setInterval(function(){
				ss+=0.1;
				document.getElementById('miao').innerHTML="计时:"+ss.toFixed(2)+"s";
			},100);
			game=setInterval(function(){
		 var num=parseInt(Math.random()*20);
			var a='img'+num;
			var picture=document.getElementById(a);
			console.log(picture);
			 picture.style.display='block'; 
			 setTimeout(function(){
			picture.style.display='none';
			picture.src='img/01.jpg';
		},2000);
			
		 }
		,1000);
		}
		var kk=0;
		/* 判断用户是否点击 进行加分 使用lastindexof 和substr截取*/
		function Mouse(obj){
			var src=obj.src;
			console.log(src);
			var cc=src.substr(src.lastIndexOf('01'),2);
			console.log(cc);
			if(cc==01){
				kk+=1;
				obj.src='img/02.jpg';
			}
			document.getElementById('fen').innerHTML="积分:"+kk+"分";
		}
		/* 结束游戏 */
		function end(){
			kk=0;
			ss=0;
			document.getElementById('starr').disabled=false;
			document.getElementById('dis').style.display='block';
			clearInterval(game);
			clearInterval(gam);
		}
	</script>
</html>

此为第二个