javascript系列js练习项目实训02:捉迷藏_javascript实训项目-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39553363/article/details/107017594

效果演示

在这里插入图片描述

案例分析：

当我们把鼠标移到小女孩身上的时候，小女孩会消失。

案例目的：

通过本此案例学习，你将会收获：
1.了解js获取元素的基础方法。
2. 了解键盘事件的种类。
3. 掌握js获取元素的方法。

开发工具

HBuilderX
注：开发工具可以选择vscode .webstrom等

闯关难度：中

知识链接

1.获取Dom元素的基本方法

方法	Value
id	document.getElementById(“id名字”)
class	document.getElementsByClassName(“class名字”)
标签名	getElementsByTagName(“标签名字”)

2.鼠标事件

项目	Value
onclick	左键单击
ondblclick	左键双击
onmouseover	鼠标悬挂
onmouseenter	鼠标移入
onmouseout onmouseleave	鼠标移出
onmousedown	鼠标按下
onmousmove	鼠标移动
onmouseup	鼠标抬起
oncontextmenu	右键单击

操作步骤：

1.静态布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 800px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="./img/02-man.png" >
			<img id="girl" src="./img/02-mitang.png" >
		</div>
	
	</body>
</html>

在静态网页中,放置两张图片，分别是左右两张。

2.引入javascript

	<body>
		<div class="box">
			<img src="./img/02-man.png" >
			<img id="girl" src="./img/02-mitang.png" >
		</div>
		<!--在此插入代码-->
		<script type="text/javascript">
		</script>
		
	</body>

3.获取元素

接下来，我们通过js获取到小女孩的这张图片，我们可以采用document.getElementById(“girl”)这个方法来帮助我们。(若不懂可以参考知识链接)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 800px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="./img/02-man.png" >
			<img id="girl" src="./img/02-mitang.png" >
		</div>
		
		<script type="text/javascript">
		  <!--在此插入代码-->
			var oimg=document.getElementById("girl");
		
		</script>
	</body>
</html>

4.鼠标事件触发

当鼠标移到小女孩这张图片的时候，图片展示属性更改为hidden.

		<script type="text/javascript">
			var oimg=document.getElementById("girl");
			<!--在此插入代码-->
			oimg.onmouseenter = function () {
               oimg.style.display="none";
            };
	
		</script>

onmouseenter 是oimg节点其中的一种属性，这个属性主要是控制当鼠标移到当前对象的上方的时候会触发。

function () {
oimg.style.display=“none”;
};

这是一个匿名函数，你可以把它当作是一个工具，用来实现某一种功能，function是关键词，用来定义函数，function后面跟上一对双括号，括号后面跟上一堆大括号，在大括号内主要放置程序流程。
oimg.style.display=“none”;目的是更改oimg css属性种的display属性为"none"，none是隐藏的意思。

5.优化代码

当鼠标移除的时候，显示小女孩

	oimg.onmouseout = function () {
			   oimg.style.display="inline";
			};

6.完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 800px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="./img/02-man.png" >
			<img id="girl" src="./img/02-mitang.png" >
		</div>
		
		<script type="text/javascript">
			var oimg=document.getElementById("girl");
			oimg.onmouseenter = function () {
               oimg.style.display="none";
            };
			oimg.onmouseout = function () {
			   oimg.style.display="inline";
			};
		</script>
	</body>
</html>