js实现电灯开关效果


Posted in Javascript onJanuary 19, 2021

本文实例为大家分享了js实现电灯开关效果的具体代码,供大家参考,具体内容如下

通过对js的一个学习,我们来完成一个模拟电灯开关的小案例。

首先对本案例进行一个分析,过程如下:

1.获取图片属性

2.绑定单击事件

3.点击时切换图片

1.通过按钮实现电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<img src="imgs/on.gif" alt="" id="img"> <br><!--图片-->
<input type="button" id="bt1" value="开" onclick="f1()"><!--按钮-->
<button id="bt2" onclick="f2()">关</button>
</body>
<script>
function f1() {//开
 let bt1=document.getElementById("bt1");//获取按钮id
 let img=document.getElementById("img");//获取图片id
 img.src="imgs/on.gif";//修改图片
}
function f2() {//关
 let bt2=document.getElementById("bt2");
 let img=document.getElementById("img");
 img.src="imgs/off.gif";
}
</script>
</html>

运行结果:

js实现电灯开关效果

2.通过点击电灯,实现开关

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<img src="imgs/off.gif" alt="" id="img"> <br>
</body>
<script>
 let img=document.getElementById("img");
 img.onclick=f;
 let flag=false;
 function f() {
 if (flag==true){
  img.src="imgs/off.gif"
  flag=false;
 }else {
  img.src="imgs/on.gif"
  flag=true;
 }
 }
</script>
</html>

简化版(利用三元运算符)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<img src="imgs/on.gif" height="180" width="109" id="img" onclick="f()">
</body>
<script>
 let img = document.getElementById("img");
 let i=0;
 function f() {
 img.src='imgs/'+(++i%2==0?'off':'on')+'.gif';
 }
</script>
</html>

运行结果

通过点击实现电灯的开关

js实现电灯开关效果

电灯素材:

js实现电灯开关效果

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

Javascript 相关文章推荐
Jquery中增加参数与Json转换代码
Nov 20 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
JavaScript实现瀑布流图片效果
Jun 30 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
jquery实现穿梭框功能
Jan 19 #jQuery
jQuery实现穿梭框效果
Jan 19 #jQuery
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 #Javascript
JS实现纸牌发牌动画
Jan 19 #Javascript
微信小程序canvas实现签名功能
Jan 19 #Javascript
vue二选一tab栏切换新做法实现
Jan 19 #Vue.js
微信小程序选择图片控件
Jan 19 #Javascript
You might like
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Django使用rest_framework写出API
2020/05/21 Python
Python extract及contains方法代码实例
2020/09/11 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
统计员岗位职责
2013/11/14 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
集体生日活动方案
2014/08/18 职场文书
营销学习心得体会
2014/09/12 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
python中 .npy文件的读写操作实例
2022/04/14 Python