脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js电灯开关

用js控制电灯开关

 更新时间：2021年04月22日 15:08:25   作者：小苏(º﹃º )  
这篇文章主要为大家详细介绍了用js控制电灯开关，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

利用js控制电灯开关，供大家参考，具体内容如下

题目：

通过js来控制电灯的开关

分析：

获取电灯泡元素，给它绑定点击事件，通过鼠标点击来实现电灯泡的开关

实现方法：

方法一：

获取图片元素，通过给按钮绑定点击事件来控制电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电灯开关案例</title>
</head>
<body>
    <img src="./img/关.gif" alt="">
    <button id="open">开灯</button>
    <button id="close">关灯</button>
</body>
<script>
    var open=document.getElementById("open");
    var close=document.getElementById("close");
    var img=document.getElementsByTagName("img")[0];
    open.onclick=function(){
        img.src="./img/开.gif"
    }
    close.onclick=function(){
        img.src="./img/关.gif"
    }
</script>
</html>

总结：这种方式比较简单，也不容易出错，通过按钮绑定，直接获取对应的电灯开关图片

运行结果：

相关方法：

  • document.getElementById():通过id名获取对应的元素,
  • document.getElementsByTagName():通过元素名获取对应的元素，获取出来的是一个类数组对象
  • onclick：单击事件，通过鼠标点击触发

方法二：

获取图片元素，直接给图片绑定开关事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电灯开关案例</title>
</head>
<body>
    <img src="./img/关.gif" alt="">
</body>
<script>
    var img=document.getElementsByTagName("img")[0];
    var flag=false;
    img.onclick=function(){
        if(flag){
            img.src="./img/关.gif";
            flag=false;
        }else{
            img.src="./img/开.gif";
            flag=true;
        }
    }
</script>
</html>

注意：这种方法需要先做一个标记（flag）来判断电灯初始的状态，直接给图片绑定点击事件的时候，需要注意标记（flag）的初始赋值为false。

运行结果：点击电灯泡时，电灯明暗依次交替

相关图片：

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

您可能感兴趣的文章:

相关文章

  • window.location和document.location的区别分析

    window.location和document.location的区别分析

    用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
    2008-12-12
  • javascript中call,apply,bind函数用法示例

    javascript中call,apply,bind函数用法示例

    这篇文章主要介绍了javascript中call,apply,bind函数用法,结合实例形式分析了call,apply,bind函数的功能、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • JS实现列表的响应式排版(推荐)

    JS实现列表的响应式排版(推荐)

    列表的响应式排版，首先每行固定好个数，然后随页面宽度调整个数和大小，保证图片的的可读性及美观。接下来小编给大家带来实现思路介绍，一起看看吧
    2016-09-09
  • 深入了解JavaScript中的二进制操作及位掩码应用

    深入了解JavaScript中的二进制操作及位掩码应用

    在JavaScript中，二进制操作可以说是一项非常强大和有用的技能，尤其是在处理数据和位掩码时，它们是不可或缺的，本文将介绍JavaScript中的二进制操作，包括什么是二进制以及如何在JavaScript中进行二进制操作
    2023-06-06
  • JavaScript字符串检索字符的方法

    JavaScript字符串检索字符的方法

    这篇文章主要为大家详细介绍了JavaScript字符串检索字符的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 浅谈JS中String()与 .toString()的区别

    浅谈JS中String()与 .toString()的区别

    下面小编就为大家带来一篇浅谈JS中String()与 .toString()的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript判断浏览器类型的方法

    JavaScript判断浏览器类型的方法

    这篇文章主要介绍了JavaScript判断浏览器类型的方法,可实现针对IE、火狐、谷歌等浏览器的判断,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • layui的form.on的使用示例详解

    layui的form.on的使用示例详解

    这篇文章主要介绍了layui的form.on的使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-07-07
  • 浅谈javascript的闭包

    浅谈javascript的闭包

    本文介绍了javascript闭包的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • Javascript无参数和有参数类继承问题解决方法

    Javascript无参数和有参数类继承问题解决方法

    这篇文章主要介绍了Javascript无参数和有参数类继承问题解决方法,本文讲解了无参数类继承的问题和有参类继承的问题,并给出了解决方案,需要的朋友可以参考下
    2015-03-03

最新评论