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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
用javascript实现读取txt文档的脚本
Jul 20 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 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生成txt文件实例代码介绍
2016/04/28 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
python多重继承新算法C3介绍
2014/09/28 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
python实现验证码识别功能
2018/06/07 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Django中提示消息messages的设置方式
2019/11/15 Python
Python高级property属性用法实例分析
2019/11/19 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
python如何写出表白程序
2020/06/01 Python
Python turtle库的画笔控制说明
2020/06/28 Python
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
端午节演讲稿
2014/05/23 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
政工师工作总结2015
2015/05/26 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技