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中获取选中对象的类型
Apr 02 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
JS Attribute属性操作详解
May 19 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
简单实现js轮播图效果
Jul 14 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 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 $_SERVER详解
2009/01/16 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
Add a Table to a Word Document
2007/06/15 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python小程序实现刷票功能详解
2019/07/17 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
python的flask框架难学吗
2020/07/31 Python
python从PDF中提取数据的示例
2020/10/30 Python
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
经典C++面试题一
2016/11/06 面试题
大学生求职推荐信
2013/11/27 职场文书
小学生优秀评语大全
2014/04/22 职场文书
创先争优宣传标语
2014/10/08 职场文书
2014年纠风工作总结
2014/12/08 职场文书