javascript实现开关灯

向右看齐 2022-01-24 00:47 177阅读 0赞

## 开关灯 ##

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

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220124/999de26f85f1447791fa86fd921cd6fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70 1]: /images/20220124/77018d9f0e5845ce8fb85128a97cde48.png