javascpirt + HTML实现点亮灯泡

最新推荐文章于 2023-03-21 12:01:41 发布

qq_40740420

最新推荐文章于 2023-03-21 12:01:41 发布

阅读量2.4k

点赞数

分类专栏： 03 自开发工具文章标签： HTML实现灯泡点亮

本文链接：https://blog.csdn.net/qq_40740420/article/details/78313156

版权

03 自开发工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

点击图片，则灯泡点亮。代码其实很简单，就是通过点击事件，切换图片URL源。

1.函数changeImage()被注册到<img标签的点击事件中，点击图片则调用此函数。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
 	{
  		element.src="/images/pic_bulboff.gif";
  	}
	else
   {
  		element.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508686706121&di=978f369aad7ee3005239a5cbe761f6cb&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fe824b899a9014c08dbf74283007b02087af4f4cc.jpg";
   }
}
</script>
<img id="myimage" οnclick="changeImage()"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509281363&di=7223b11b93d963f1b7c5da410b44f994&imgtype=jpg&er=1&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F0823dd54564e92585387abcb9682d158ccbf4e67.jpg" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
	
</body>
</html>