js实现电灯开关效果

本文实例为大家分享了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实现电灯开关小案例
• 用js控制电灯开关

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！