原生js开灯关灯特效

最新推荐文章于 2022-11-30 11:58:51 发布

小陈同学，，

最新推荐文章于 2022-11-30 11:58:51 发布

阅读量738

点赞数 4

分类专栏： js 文章标签： js 开关灯效果

本文链接：https://blog.csdn.net/ping_lvy/article/details/115518268

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天练习js写的开关灯特效

老开心了

老有成就感了

嘻嘻嘻~~~

ps:白色效果不明显，我又改成粉色了

<!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>Document</title>
</head>
<style>

</style>
<body>
  <button id="lampBtn">关灯</button>
  <script>
    // 要实现的思路和功能
    // 默认页面是白色的（开灯状态），按钮显示的文字是关灯
    // 1点击按钮
    //   2获取当前开关灯状态
    //   3如果当前是开灯状态（body的背景颜色是白色），我们让body背景颜色变为黑色（关灯状态），按钮中显示关灯
    //   4如果当前是关灯状态（body的背景颜色是黑色），我们让body背景颜色变为白色（开灯状态），按钮显示关灯

    //1想要操作谁就先获取谁 body和按钮
    let lampBtn = document.getElementById('lampBtn');//获取按钮
    let body = document.body;//获取body
    
    //2事件绑定，点击按钮的时候做什么事情
    lampBtn.onclick = function(){
      // 元素.style.xxx =xxx,设置元素的行内样式，元素.style.xxx不赋值的情况下是获取元素的行内样式（记住是行内样式，
      // 不管在哪设置的样式，只要不是在行内上设置的，都获取不到）
      //获取body的背景颜色
      let bg = body.style.backgroundColor;
      if(bg==='white'){
        //当前body的北京颜色
        body.style.backgroundColor="black";
        lampBtn.innerText="开灯"
      }else{
        //当前处于关灯状态
        body.style.backgroundColor="white";
        lampBtn.innerText="关灯"
      }

    }


  </script>
</body>
</html>

小陈同学，，

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
原生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-sca
复制链接

扫一扫

专栏目录