JavaScript实现电灯开关小案例


Posted in Javascript onMarch 30, 2020

今天学习了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实现电灯开关小案例

案例素材:

JavaScript实现电灯开关小案例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
javascript实现计算器功能
Mar 30 #Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 #Javascript
记一次react前端项目打包优化的方法
Mar 30 #Javascript
12 种使用Vue 的最佳做法
Mar 30 #Javascript
javascript实现简易数码时钟
Mar 30 #Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 #Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 #Javascript
You might like
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python中元组,列表,字典的区别
2017/05/21 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
计算机专业自荐信
2013/10/14 职场文书
大学生求职简历的自我评价
2013/10/21 职场文书
寒假实习自荐信
2014/01/26 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Matlab如何实现矩阵复制扩充
2021/06/02 Python
python缺失值填充方法示例代码
2022/12/24 Python