javascpirt + HTML实现点亮灯泡

编程知识行业动态更新时间:2024-06-13 00:19:46

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

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

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

更多推荐

javascpirt + HTML实现点亮灯泡

本文发布于:2023-03-28 19:35:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/9c1fea3dd7aafc4093a9b46b1f1d9ddc.html