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 相关文章推荐
javascript实现表格增删改操作实例详解
May 15 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
Vue+Django项目部署详解
May 30 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
Vue发布订阅模式实现过程图解
Apr 30 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中生成UUID自定义函数分享
2015/06/10 PHP
详解php的socket通信
2015/08/11 PHP
orm获取关联表里的属性值
2016/04/17 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
js切换光标示例代码
2013/10/10 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
使用python远程操作linux过程解析
2019/12/04 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
Python调用Redis的示例代码
2020/11/24 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
小学生作文评语集锦
2014/12/25 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL