• 售前

  • 售后

热门帖子
入门百科

用js控制电灯开关

[复制链接]
Happysong 显示全部楼层 发表于 2021-10-26 13:47:52 |阅读模式 打印 上一主题 下一主题
使用js控制电灯开关,供大家参考,具体内容如下
标题:

通过js来控制电灯的开关
分析:

获取电灯泡元素,给它绑定点击变乱,通过鼠标点击来实现电灯泡的开关
实现方法:

方法一:
获取图片元素,通过给按钮绑定点击变瞎搅控制电灯开关
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>电灯开关案例</title>
  8. </head>
  9. <body>
  10.     <img src="./img/关.gif" alt="">
  11.     <button id="open">开灯</button>
  12.     <button id="close">关灯</button>
  13. </body>
  14. <script>
  15.     var open=document.getElementById("open");
  16.     var close=document.getElementById("close");
  17.     var img=document.getElementsByTagName("img")[0];
  18.     open.onclick=function(){
  19.         img.src="./img/开.gif"
  20.     }
  21.     close.onclick=function(){
  22.         img.src="./img/关.gif"
  23.     }
  24. </script>
  25. </html>
复制代码
总结:这种方式比力简单,也不轻易堕落,通过按钮绑定,直接获取对应的电灯开关图片
运行结果:

干系方法:
       
  • document.getElementById():通过id名获取对应的元素,   
  • document.getElementsByTagName():通过元素名获取对应的元素,获取出来的是一个类数组对象   
  • onclick:单击变乱,通过鼠标点击触发
方法二:
获取图片元素,直接给图片绑定开关变乱
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>电灯开关案例</title>
  8. </head>
  9. <body>
  10.     <img src="./img/关.gif" alt="">
  11. </body>
  12. <script>
  13.     var img=document.getElementsByTagName("img")[0];
  14.     var flag=false;
  15.     img.onclick=function(){
  16.         if(flag){
  17.             img.src="./img/关.gif";
  18.             flag=false;
  19.         }else{
  20.             img.src="./img/开.gif";
  21.             flag=true;
  22.         }
  23.     }
  24. </script>
  25. </html>
复制代码
注意:这种方法需要先做一个标记(flag)来判定电灯初始的状态,直接给图片绑定点击变乱的时候,需要注意标记(flag)的初始赋值为false。
运行结果:点击电灯泡时,电灯明暗依次交替
干系图片:


以上就是本文的全部内容,希望对大家的学习有所资助,也希望大家多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作