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 相关文章推荐
js停止输出代码
Jul 20 Javascript
js 操作select相关方法函数
Dec 06 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
JavaScript编写开发动态时钟
Jul 29 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
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
拖动时防止选中
2017/02/03 Javascript
JS实现复制功能
2017/03/01 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
js实现简单的打印表格
2020/01/15 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python退火算法在高次方程的应用
2018/07/26 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
8和9的加减法教学反思
2014/05/01 职场文书
学校火灾防控方案
2014/06/09 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
教师党员承诺书2015
2015/01/21 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android