Bug记录--第一天（蝼蚁虽小......）_记录写bug的第一天-优快云博客

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

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>

运行结果：