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 相关文章推荐
获取3个数组不重复的值的具体实现
Dec 30 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
浅析php单例模式
2014/11/25 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
Python基于DES算法加密解密实例
2015/06/03 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
Python subprocess库的使用详解
2018/10/26 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
django实现用户注册实例讲解
2019/10/30 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
教师自我鉴定范文
2013/11/10 职场文书
护士毕业生自荐信
2014/02/07 职场文书
研究生导师推荐信
2014/09/06 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
五年级作文之想象作文
2019/10/30 职场文书