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 相关文章推荐
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
js获取域名的方法
Jan 27 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 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
ip签名探针
2006/10/09 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
利用js对象弹出一个层
2008/03/26 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Python用threading实现多线程详解
2017/02/03 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
工业设计专业个人求职信范文
2013/12/28 职场文书
《母鸡》教学反思
2014/02/25 职场文书
农村党员一句话承诺
2014/05/30 职场文书
企业安全生产标语
2014/06/06 职场文书
户籍证明格式
2014/09/15 职场文书
小浪底导游词
2015/02/12 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
Oracle中日期的使用方法实例
2022/07/07 Oracle