javascript实现开关灯

最新推荐文章于 2024-03-03 20:36:39 发布

大可&不必

最新推荐文章于 2024-03-03 20:36:39 发布

阅读量3.2k

点赞数

文章标签： javascript实现开关灯

本文链接：https://blog.csdn.net/style201904/article/details/90724159

版权

开关灯

 <style>
       body{background: black;cursor: pointer;}
       .lamp{width: 100px;height: 100px;border-radius: 50%;background: #ccc;}
       .pole{width: 10px;height: 400px;background: brown;margin-left: 45px;}
       .toggle{width: 80px;height: 40px;background: green;border-radius: 5px;margin-left: 10px;color: white;line-height: 40px;text-align: center;} 
    </style>

<body id="bg">
  <!-- 灯 -->
  <div class="lamp" id="lamp"></div>
  <!-- 灯线 -->
  <div class="pole"></div>  
  <!-- 开关 -->
  <div class="toggle" id="toggle">开灯</div>
  <script>
//    web前端三门语言
// html
// css  
// javascript===>脚本语言，丰富动画，操作事件等
// 需要写在script标签内，script标签可以放置在html的任意位置
// 比较常见的三个位置，
// 1.body体内，html标签下面
// 2.body体外的下面
// 3.head头部style标签的下面

//  js动效的操作思路：
//  1.操作谁先获取谁；
// var 创建、声明变量
// toggle 变量名
// document事件元素，事件流
// getElementById  获取元素通过ID名的形式。   
   var toggle = document.getElementById('toggle');
   var lamp = document.getElementById('lamp');
   var bg = document.getElementById('bg')
// 2.操作用什么事件
   toggle.onclick = function(){
    //验证当前操作
    // console.log代表打印某某某。
    // console.log(123456789)    
// 3.事件发生时需要做什么
//  if,else事件判断逻辑
//  innerHTML===>元素的内容
     if(toggle.innerHTML=='开灯'){
       lamp.style.background='yellow';
       bg.style.background='white'; 
      //开灯之后要将toggle改变为'关灯'
       toggle.innerHTML='关灯'    
     }else{
       lamp.style.background='#ccc';
       bg.style.background='black';
       toggle.innerHTML='开灯'  
     }
   }  



  </script>  
</body>

效果图
在这里插入图片描述