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 相关文章推荐
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
AJAX检测用户名是否存在的方法
Mar 24 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将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
js消除图片小游戏代码
2019/12/11 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Python如何进行时间处理
2020/08/06 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
职业规划书如何设计?
2014/01/09 职场文书
丑小鸭教学反思
2014/02/03 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
快递员岗位职责
2014/09/12 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL