主页 / 网络编程 /

用js控制电灯开关

网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了用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。

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

相关图片

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

上一篇：详解React setState数据更新机制 下一篇：React-Native 环境搭建和基本介绍

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by