JavaScript和JQuery

最新推荐文章于 2024-07-29 11:53:27 发布

Chahaha123

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量104

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/C573751767/article/details/117381284

版权

JavaScript和JQuery

工具网站：
https://jquery.cuishifeng.cn/index.html

JQuery:
使用变量

$(‘img:nth-child(’+i+’)’)
选中当前img元素的父级元素的第i个img元素
注意点：使用变量的时候变量前后有个‘+’。
$(‘img’).eq(i)也可选中第i个img元素。

img

$(‘img:nth-child(’+i+’)’).attr(‘src’,’./imgs/mouse.png’)
设置img的路径

JS:
计时相关

let timer = setInterval(function(){…}, 1000)
clearInterval(timer)
setInterval是每1000ms执行一次function的内容。
clearInterval是清空计时器。
setTimeout(function(){…}, 1000)
在1000ms后执行function的内容。

模仿源码之家小游戏：

打地鼠
https://www.mycodes.net/166/10359.htm
源码之家用JavaScript Dom，我的是用JQuery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打地鼠</title>
<style>
body, div, img, button{
	margin:0;
	padding:0;
}

.glass{
	margin:0 auto;
	height: 900px;
	width: 800px;
	background: url("./imgs/timg.jpg") no-repeat center;
	position: relative;
	bottom: 157px;
}

img{
	height: 100px;
	width: 100px;

}

img:nth-child(1){
	position: absolute;
	left: 152px;
	top: 295px;
}

img:nth-child(2){
	position: absolute;
	left: 359px;
	top: 295px;
}

img:nth-child(3){
	position: absolute;
	left: 562px;
	top: 295px;
}

img:nth-child(4){
	position: absolute;
	left: 152px;
	top: 429px;
}

img:nth-child(5){
	position: absolute;
	left: 359px;
	top: 429px;
}

img:nth-child(6){
	position: absolute;
	left: 562px;
	top: 429px;
}

img:nth-child(7){
	position: absolute;
	left: 152px;
	top: 567px;
}

img:nth-child(8){
	position: absolute;
	left: 359px;
	top: 567px;
}

img:nth-child(9){
	position: absolute;
	left: 562px;
	top: 567px;
}

#time{
	width:200px;
	height:30px;
	background:#efb113;
	border-radius:10px;
	position: absolute;
	left: 103px;
	top: 251px;
	text-align: center;
	line-height : 30px; 
	color: #794c20;
	font-weight: bolder;
}

#score{
	width:200px;
	height:30px;
	background:#efb113;
	border-radius:10px;
	position: absolute;
	left: 496px;
	top: 251px;
	text-align: center;
	line-height : 30px; 
	color: #794c20;
	font-weight: bolder;
}

button{
	width:200px;
	height:30px;
	background:#ef4113;
	border: none;
	border-radius: 10px;
	position: absolute;
	left: 310px;
	top: 482px;
	font-weight: bolder;
	color: white;
	text-align: center;
	line-height : 30px; 
	
}

</style>
<script src="lib/jquery-3.6.0.js"></script>

</head>
<body>
<div class="glass">
	<img src="./imgs/mouse.png">
	<img src="./imgs/mouse.png">
	<img src="./imgs/mouse.png">
	
	<img src="./imgs/mouse.png">
	<img src="./imgs/mouse.png">
	<img src="./imgs/mouse.png">
	
	<img src="./imgs/mouse.png">
	<img src="./imgs/mouse.png">
	<img src="./imgs/mouse.png">
	<button style="visibility:visible;"></button>
	<div id="time"></div>
	<div id="score"></div>
</div>

<script src="mouse.js"></script>

</body>
</html>

/**
 * 游戏实现的效果：
 * 1. 显示剩余时间，目前得分；
 * 2. 点击按钮后按钮消失游戏开始，游戏结束按钮出现；
 * 3. 游戏内容：
 * 	3.1 地鼠随机出现在某个洞中；
 *  3.2 点击地鼠，得分，地鼠显示出被打的状态；
 *  3.3 时间到，游戏结束。
 */

//初始化
var time = $('#time');
var score = $('#score');
var btn = $('button');
time.text('剩余时间');
score.text('得分: 0');
btn.text('开始游戏');
for(let i=1;i<=9;i++){
	$('img:nth-child('+i+')').hide();
}



btn.click(function(){
	$(this).hide();
	time.text('剩余时间');
	score.text('得分: 0');
	//游戏时间10s
	let count = 10;
	let currentScore = 0;
	let timer1 = setInterval(function(){
		time.text('剩余时间: '+count+'s');
		count--;
		
		if(count<0){
			clearInterval(timer1);
			clearInterval(timer2);
			time.text('游戏结束');
			btn.show();
		}
		
	}, 1000);
	

	let timer2 = setInterval(function(){
		for(let i=1;i<=9;i++){
			$('img:nth-child('+i+')').attr('src','./imgs/mouse.png');
			$('img:nth-child('+i+')').hide();
		}
		let cur = Math.floor(Math.random()*9);
		$('img:nth-child('+cur+')').show();
		$('img:nth-child('+cur+')').click(function(){
			$('img:nth-child('+cur+')').attr('src','./imgs/mouse2.png');
			currentScore++;
			score.text('当前得分：'+currentScore);
			setTimeout(function(){
				$('img:nth-child('+cur+')').hide();
			}, 200);
		})
		
		
	}, 2000);
	
})

Chahaha123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript和JQuery

JavaScript和JQueryJQuery:使用变量$(‘img:nth-child(’+i+’)’)选中当前img元素的父级元素的第i个img元素注意点：使用变量的时候变量前后有个‘+’。$(‘img’).eq(i)也可选中第i个img元素。img$(‘img:nth-child(’+i+’)’).attr(‘src’,’./imgs/mouse.png’)JS:计时相关let timer = setInterval(function(){…}, 1000)clear
复制链接

扫一扫