JavaScript实验之开关灯

laiczhang
laiczhang
laiczhang
67
文章
0
评论
2020年5月10日21:37:03 评论 19 741字阅读2分28秒

JavaScript实验之开关灯

实验要求:

1、在网页上默认有一张图片,一行文字;

2、点击图片,将图片更换为灯亮的图片,并且将文字进行修改,颜色改为红色;

3、再次点击图片,将图片更换为灯灭,文字变为黑色。

JavaScript实验之开关灯

源代码

<!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8" />
		<title>开关灯</title>
		<style type="text/css">
			#div1{
				width: 150px;
				text-align: center;
			}
		</style>
		<script>
			var flag = 1;
			function fun(){
				if(flag != 1){
					document.getElementById("img").src = 'img/on.png';
					document.getElementById("div1").innerHTML = "灯亮了"
					document.getElementById("div1").style.color = "red";
					flag = 1;
				}else{
					document.getElementById("img").src = 'img/off.png';
					document.getElementById("div1").innerHTML = "灯灭了"
					document.getElementById("div1").style.color = "black";
					flag = 0;
				}
			}
		</script>
	</head>
	<body>
		<img src="img/off.png" id="img" width="150px" onclick="fun()"/>
		<div id="div1">灯灭了</div>
	</body>
</html>

参考技术:

  1. 单击事件以及函数的声明与调用;
  2. JS获取网页元素;
  3. JS修改网页元素的文本、属性和样式。
laiczhang
WordPress禁用文章修订和自动保存功能 网站维护

WordPress禁用文章修订和自动保存功能

前言 WordPress有个文章修订和自动保存功能,作用是在你编辑文章后就会帮你自动保存 那么无论是遇到浏览器奔溃,电脑故障等等问题都不会有太大的损失 但有个问题在于:文章修订和自动保存功能一方面会有...
Hostloc发超链接的方法 骚操作

Hostloc发超链接的方法

Hostloc是一个讨论全球云服务器的面向国内用户的论坛,采用的是Discuz程序。 Discuz是支持UBB的,但是在Hostloc对超链接的UBB进行了一定的处理,常规的UBB会自动转为文本 那么...