js实现电灯开关效果

2025-09-26 00:27:00

本文实例为大家分享了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>

运行结果：

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>

运行结果

通过点击实现电灯的开关

电灯素材：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript实现电灯开关小案例

今天学习了JavaScript的一些简单知识,感觉挺有意思,仅仅通过简简单单的几行代码就能模拟出生活中的一些应用场景,Interesting.比如我今天要写的这个模拟电灯开关的小案例. 首先对本案例进行一个分析,过程如下: 1.获取图片对象 2.绑定单击事件 3.每次点击,切换图片切换规则:如灯是开着的,则切换图片为off状态,如果灯是关着的,则切换图片为on状态,灯的状态用flag标记代码实现: <!DOCTYPE html> <html lang="en"&g
js实现电灯开关效果

本文实例为大家分享了js实现电灯开关效果的具体代码,供大家参考,具体内容如下通过对js的一个学习,我们来完成一个模拟电灯开关的小案例. 首先对本案例进行一个分析,过程如下: 1.获取图片属性 2.绑定单击事件 3.点击时切换图片 1.通过按钮实现电灯开关 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title&
JS遮罩层效果兼容ie firefox jQuery遮罩层

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
Vue.js实现拖放效果的实例

页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>
bootstrap vue.js实现tab效果

本文实例为大家分享了bootstrap vue.js实现tab效果的具体代码,供大家参考,具体内容如下项目目录结构 Student.js代码 function Student(){ this.baseInfo = { tabStatus : true , name : '张三', sex : 'male' } , this.parentsInfo = { tabStatus : false, fatherName : '张全蛋', motherName : '李铁柱' } , this.stu
JS实现Fisheye效果动感放大菜单代码

本文实例讲述了JS实现Fisheye效果动感放大菜单代码.分享给大家供大家参考,具体如下: 这款Fisheye Menu,是采用JS+CSS+XHTML实现的动感放大菜单,放到图标上的时候,图标会被放大,整个菜单有缓冲弹簧的效果,学jQuery的朋友见的比较多,不过本款没有用到jQuery,效果却同样精彩. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fisheye-style-menu-demo/ 具体代码如下: <!DOCTYPE
基于React.js实现原生js拖拽效果引发的思考

一.起因&思路一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置
简单实现js选项卡切换效果

本文实例为大家分享了js选项卡切换效果的具体代码,供大家参考,具体内容如下实现思路: 1.首先获取id元素. 2.for循环历遍按钮元素添加onclick事件. 3.排他思想,点击按钮时设置所有选项卡按钮样式为空,利用this关键字指定当前选项卡获得高亮样式. 4.下面的多个div内容块以此类推. 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClientRect 接口,此
简单实现js无缝滚动效果

本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } img{ vert
js省市联动效果完整实例代码

本文实例讲述了js省市联动效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title></title> <script language="javascript" type="text/javascript"> //定义城市数据数组 cityArray = new Array(); cityArray[0] = new Array("北

js实现电灯开关效果

相关推荐

随机推荐