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一些题目的解析
Dec 25 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
vue-router单页面路由
Jun 17 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
javascript 设计模式之享元模式原理与应用详解
Apr 08 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP Include文件实例讲解
2019/02/15 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
javascript动态修改Li节点值的方法
2015/01/20 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
软件配置管理有什么好处
2015/04/15 面试题
新闻记者实习自我鉴定
2013/09/19 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
nginx请求限制配置方法
2021/07/09 Servers
MySQL 5.7常见数据类型
2021/07/15 MySQL
bat批处理之字符串操作的实现
2022/03/16 Python