JavaScript实现电灯开关小案例
更新时间：2020年03月30日 15:23:53 作者：I Java
这篇文章主要为大家详细介绍了JavaScript实现电灯开关小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
今天学习了JavaScript的一些简单知识，感觉挺有意思，仅仅通过简简单单的几行代码就能模拟出生活中的一些应用场景，Interesting。比如我今天要写的这个模拟电灯开关的小案例。
首先对本案例进行一个分析，过程如下：
1.获取图片对象
2.绑定单击事件
3.每次点击，切换图片
切换规则：如灯是开着的，则切换图片为off状态，如果灯是关着的，则切换图片为on状态，灯的状态用flag标记
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关案例</title>
</head>
<body>
<!--定义一个图片标签-->
<img src="img/off.gif" id = "light" alt="">
<script >
//通过id属性值获取img标签对象
var light = document.getElementById("light");
var flag = false; //定义一个灯的标记状态，默认灯是关闭的
//绑定单击事件
light.onclick = function () {
//判断灯的状态，如果flag状态为true，则关闭灯。如果flag状态为false，则开启灯
if(flag){
//灯是开着的，关闭灯
light.src = "img/off.gif";
//修改灯的状态（关闭状态）
flag = false;
}else {
//灯是关着的，开启灯
light.src = "img/on.gif";
//修改灯的状态（开启状态）
flag = true;
}
}
</script>
</body>
</html>
运行效果：
案例素材：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JavaScript缓冲运动实现方法,简单分析了JavaScript缓冲运动的实现原理与相关运算技巧,并给出了两则实例代码予以总结分析,需要的朋友可以参考下2016-01-01
微信内置浏览器屏蔽了下载链接,如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,那么该如何判断用户是否是用微信浏览器呢?这篇文章主要给大家介绍了关于js代码判断是否处于微信浏览器内的两种方式,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了JS控制按钮10秒钟后可用的方法,涉及JavaScript基于时间函数控制页面元素样式动态变换的技巧,需要的朋友可以参考下2015-12-12
JS循环遍历ul中li的点击事件给选中li添加css样式(示例代码)
对于一个ul中固定的li个数，当点击其中一个li时，改变选中li的颜色；同时改变对应的另一个ul中li的颜色，怎么实现这个功能呢，下面小编给大家带来了js循环遍历ul中li的点击事件，给给选中li添加css样式，感兴趣的朋友一起看看吧2023-07-07
这篇文章主要介绍了JS的执行机制(EventLoop、宏任务和微任务)，具有很好的参考价值，希望对大家有所帮助。2023-01-01
javascript每日必学之运算符，javscript的逻辑中的正序，分支，循环以及一些简单的运算符，想要成为javascript大神的朋友不要错过，阅读一下2016-02-02
这篇文章主要介绍了深入理解Javascript中this的作用域,本文用大量例子来深入探讨this的作用域,需要的朋友可以参考下2014-08-08
javascript实现dom动态创建省市纵向列表菜单的方法
这篇文章主要介绍了javascript实现dom动态创建省市纵向列表菜单的方法,可实现省市列表菜单效果,涉及javascript鼠标事件及页面处理json数据的技巧,需要的朋友可以参考下2015-05-05
这篇小文章主要是通过一些例子来介绍一些Javascript中一些关于命名变量，函数，类或者是组件的通用约定，虽然这些规则并不是强制性的，但是呢，他们却被一些JS社区所广泛采用，所以，了解他们还是很有必要的2023-03-03
本教程使用js实现两张图片切换/多张图片轮换/结束执行等效果，感兴趣的朋友可以参考下哈，希望对你学习js有所帮助2013-04-04
最新评论