Bug记录--第一天（蝼蚁虽小......）

时光Timely

于 2018-11-23 16:38:56 发布

阅读量580

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Smtime826/article/details/84398487

版权

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的灯泡开关效果案例。通过获取页面元素并利用三目运算符改变图片源，实现了点击灯泡时其状态的切换。代码展示了如何结合HTML与JavaScript进行简单的交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

document not docunment ;
var xx=document.getElementById("demo1); //别看不起一对引号" " .
三目运算符的格式 -------表达式1?表达式2:表达式3; //注意 : 是英文状态下的

JavaScript小案例----点击灯泡发光

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>灯泡闪亮</title>
 </head>
   <body>
	<img id="demo1" onClick="light()" src="js/pic_bulboff.gif" />
	<p>点击灯泡可放光</p>
	<script>
	    function light(){
		var xx=document.getElementById("demo1");
		 if(xx.src.match("bon")){
		   xx.src="js/pic_bulboff.gif" ;
		 }else{
		   xx.src="js/pic_bulbon.gif" ;
		}
	    }
	</script>
   </body>
</html>

还可以这样写：

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>灯泡闪亮</title>
 </head>
   <body>
	<img id="demo1" onClick="light()" src="js/pic_bulboff.gif" />
	<p>点击灯泡可放光</p>
	<script>
	    function light(){
		var xx=document.getElementById("demo1");
		xx.src=xx.src.match("bon")?"js/pic_bulboff.gif":"js/pic_bulbon.gif";
	    }
	</script>
   </body>
</html>

运行结果：