原生JS中的实现开关逻辑的四种方法

最新推荐文章于 2023-10-15 23:00:40 发布

尔嵘

最新推荐文章于 2023-10-15 23:00:40 发布

阅读量5k

点赞数 3

分类专栏： JavaScript HTML+CSS 文章标签：开关逻辑原生JS

未经csdn博主（前端-尔嵘）允许不得转载，转载请注明转载路径及说明！

本文链接：https://blog.csdn.net/xu441520/article/details/94871191

版权

JavaScript 同时被 2 个专栏收录

101 篇文章 7 订阅

订阅专栏

HTML+CSS

17 篇文章 0 订阅

订阅专栏

当你随着对前端学习的深入和做更多的项目时，会发现原生JS中开关逻辑是非常重要的.

注意:在运行的时候去掉注释，下面的代码仅保留第一种方式。

效果如下：（开关图片建议自己找两张，实现点击切换）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img id="img" src="img/pic_bulboff.gif" alt=""/>
	</body>
	<script type="text/javascript">
		var imgObj = document.getElementById("img");
		//第一种方式：
//		var count = 0;//记录点击的次数
//		imgObj.onclick = function (){
//			count++;
//			if (count % 2 != 0) {
//				//奇数  --- 开
//				imgObj.src = "img/pic_bulbon.gif";
//			} else{
//				//偶数 -- 关
//				imgObj.src = "img/pic_bulboff.gif";
//			}
//		}
      //第二种方式：
//    console.log(imgObj.src);
//    imgObj.onclick = function (){
//    	//如果关，则打开
//    	//注意：此方法最需要注意的是没有报错，但是也没有结果。下面的绝对路径是通过检查和调试的方式得到的，最容易想到的是使用相对路径，但是在计算机里面不能用相对路径
//    	if (imgObj.src == "http://127.0.0.1:8020/H0202JS%E5%9F%BA%E7%A1%8003/img/pic_bulboff.gif") {
//    		console.log("开");
//    		imgObj.src = "img/pic_bulbon.gif";//开
//    	} else{
//    		console.log("关");
//    		imgObj.src = "img/pic_bulboff.gif";//关
//    	}
//    	
//    }

    //第三种方式：最常规的逻辑思路，常用
//  假设 true 灯亮 false 灯灭
//  var onOff = false;
//  imgObj.onclick = function (){
//  	  if (onOff == false) {
//  	  	imgObj.src = "img/pic_bulbon.gif";//开
//  	  	onOff = true;//改变状态
//  	  } else{
//  	  	imgObj.src = "img/pic_bulboff.gif";//关
//  	  	onOff = false;//改变状态
//  	  }
//  	  
//  	  
//  }
     //第四种方式： 假设 true 灯亮 false 灯灭
//   var isT = false;
//   imgObj.onclick = function (){
//   imgObj.src = isT == false ? "img/pic_bulbon.gif" : "img/pic_bulboff.gif";
//   isT = !isT;//每次对结果取反，改变状态
//   }
//     
	</script>
</html>