原生JS中的实现开关逻辑的四种方法_前端开关逻辑_尔嵘的博客-程序员宝宝

当你随着对前端学习的深入和做更多的项目时，会发现原生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>

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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Jzoj4709 Matrix_dianning8393的博客-程序员宝宝

十分套路，这种题很明显是单独计算每个元素的贡献来搞的我们发现，对于ti，它最后到n,n的路线有C(2n-i-2,n-2)条而对于每条路线，其值发生的变化都为t[i]*a^(n-i)*b^(n-1)所以贡献就是∑t[i]*a^(n-i)*b^(n-1)*C(2n-i-2,n-2)l的话差不多吧快速求c(n,m)应该不用讲了吧#includ...

XAML映射使用以及Window窗体属性_打代码的鞋狗女孩的博客-程序员宝宝

编写WPF中的Windows桌面应用程序，需要用到XAML这种可扩展应用程序标记声明性质的XML语法。XAML通常用来方便我们描述对象和属性的层次结构。当然XAML能实现的东西同样也是可以用C#语法去编译实现，但是相对主要以命令式程序编译的C#来说，XAML可以用声明的方法对程序代码进行编译，属实灵活得多。对于XAML的作用，首先我们就需要了解到XAML元素一般映射到.NET类和Windows R...

Yoshua Bengio：深度学习如何实现系统进化？_喜欢打酱油的老鸟的博客-程序员宝宝

2020-09-02 01:27:20作者 | 青暮、彩娴、大鑫编辑 | 陈彩娴8月29日至30日，主题为“智周万物”的2020年中国人工智能大会（CCAI 2020）在位于江苏南京的新加坡·南京生态科技岛举办。加拿大蒙特利尔大学教授、2018年图灵奖获得者、蒙特利尔学习算法研究所（Mila）主管Yoshua Bengio在这次大会中进行了在线演讲，演讲主题是《DeepLearning：From System One to System Two》。Yoshua Bengio提到，人的

h5 app 设置全屏_weixin_30340775的博客-程序员宝宝

h5 app的全屏和沉浸式状态栏是不一样的全屏模式常见使用场景：如果页面是全屏游戏，一般会直接让状态栏消失，也就是页面全屏。webview高度全屏了，状态栏没有了。写法：终端支持：没有终端类型限制高度处理：与状态栏透明相同，webview高度=屏幕高度，状态栏高度为0且不显示前景内容。需要注意dom里fix元素的调整。使用方法勾选全屏模式即可，也可以直接才配置文件ma...

什么是依赖注入？_yzbz的博客-程序员宝宝

什么是依赖注入？就是把有依赖关系的类放到容器中,然后解析出这些类的实例，就是依赖注入。目的是实现类的解耦。控制反转就是面向对象编程中的一种设计原则，用来减低代码之间的耦合度。其中最常见的方式叫做依赖注入。举例：a依赖b，但a不控制b的创建和销毁，只能使用b，那么b的控制权交给a之外处理，这叫控制反转(IOC)，而a要依赖b，必然要使用b的instance如下：通过a的接口，把b传入；通过a的构造，把b传入；通过设置a的属性，把b传入；这个过程叫依赖注入。那么依赖方式又有哪些

一起使用GO(golang) 来做一个后台管理系统系列（5）实现登录部分，校验登陆用户（转载）_shuirenbushijun的博客-程序员宝宝

首先修改页面的login.html添加页面登陆事件这块js写的： function login() { var formData = new FormData(); formData.append("username",$('input[name="username"]').val()) formData.append("password",$('input[name="password"]').val()) $.ajax({