菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
2
0

用js控制电灯开关

原创
05/13 14:22
阅读数 135183

题目:

通过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="用js控制电灯开关">
    <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(){
www.cppcns.com        img.src="./img/关.gif"
    }
haphRdf</script>
</html>

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

运行结果:

用js控制电灯开关

相关方法:

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

方法二:

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

<!DOCTYPE html>
<html lang="en"&http://www.cppcns.comgt;
<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="用js控制电灯开关">
</body>
<script>
    var img=document.getElementsByTagName("img")[0];
    var flag=false;
    img.onclwww.cppcns.comick=function(){
        if(flag){
            img.src="./img/关.gif";
            flag=false;
        }else{
            img.src="./img/开.gif";
            flag=true;
        }
    }
</script>
</html>

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

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

相关图片:

用js控制电灯开关

用js控制电灯开关

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

本文标题: 用js控制电灯开关
本文地址: http://www.cppcns.com/wangluo/javascript/386857.html

发表评论

0/200
2 点赞
0 评论
收藏