用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。

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

相关图片：

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

赞 (0)

相关推荐

  • JavaScript实现电灯开关小案例

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

  • js实现电灯开关效果

    js实现电灯开关效果

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

  • 用js控制电灯开关

    用js控制电灯开关

    利用js控制电灯开关,供大家参考,具体内容如下 题目: 通过js来控制电灯的开关 分析: 获取电灯泡元素,给它绑定点击事件,通过鼠标点击来实现电灯泡的开关 实现方法: 方法一: 获取图片元素,通过给按钮绑定点击事件来控制电灯开关 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co

  • 通过js控制时间,一秒一秒自己动的实例

    1.第一种形式 <html> <head> <title>时间</title> <script type="text/javascript"> setInterval("showtime()", 1000); function showtime() { var date = new Date(); var time = date.getHours() + ":" + date.getMi

  • js控制网页背景音乐播放与停止的方法

    本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

  • JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

  • JS控制表格实现一条光线流动分割行的方法

    本文实例讲述了JS控制表格实现一条光线流动分割行的方法.分享给大家供大家参考.具体分析如下: 这是很漂亮的一个分割行的代码. 其实就是利用JS控制表格实现的一条七彩流光分割横线 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js用单元格实现的七彩线条</tit

  • js控制的遮罩层实例介绍

    闲来无事,把项目里很土的弹窗,改成了遮罩层显示,感觉效果好点了.上代码: 父页面: 复制代码 代码如下: <div id='newDiv1' style="display: none;"> <%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %> <%--<jsp:include page="/WEB-INF/jsp/infobackup/martyr/prin

  • js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

    本文实例讲述了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法.分享给大家供大家参考.具体如下: //控制logo的显示位置 Begin window.addEventListener("resize", function () { // 得到屏幕尺寸 (内部/外部宽度,内部/外部高度) changeLogoPosition(); }, false); changeLogoPosition(); function changeLogoPosition() { var conten

  • JS 控制CSS样式表

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

  • JS控制静态页面传递参数并获取参数应用

    在项目中遇到这也一个问题: 有a.html和b.html. 1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用. 2.a页面已经打开,b页面无论是否打开.在a页面需要获取到b页面的一些元素甚至变量,以便于应用到a页面. 注意:不涉及跨域问题. 想了很久,终于想到了解决方案. 第一个问题,我们可以利用html页面锚点的特性,将参数通过url传递给b页面 这是a页面代码: <button>跳转设置</button

  • js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码

    JS 控制文本框只能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')"onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"> JS 控制文本框只能输入数字.小数点 <inputonkeyup="value=value.repl

随机推荐