vue+css+js实现白天黑夜模式切换

最新推荐文章于 2024-07-02 08:55:42 发布

賏铘

最新推荐文章于 2024-07-02 08:55:42 发布

阅读量494

点赞数

文章标签： javascript vue.js css

本文链接：https://blog.csdn.net/qq_66061193/article/details/129898951

版权

  <div id="body">
    <div class="kaiguan" >
        <div class="bai" id="anniu"></div>
      </div>
  </div>

 mounted() {
    var anniu = document.getElementById('anniu');
    var kaiguan = document.querySelector('.kaiguan');
    var body = document.getElementById('body');
    var temp = 1;
    anniu.addEventListener('click', function () {
      if (temp == 1) {
        anniu.className = 'hei';
        temp = 0;
        kaiguan.style.border = '2px solid  rgb(11, 243, 81)';
        body.style.backgroundColor = '#000';
        body.style.color = 'white';
      } else {
        anniu.className = 'bai';
        temp = 1;
        kaiguan.style.border = '2px solid black';
        body.style.backgroundColor = '#fff';
        body.style.color = 'black';
      }

    })
  }
}

css部分

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#body {
  height: 100vh;
  transition: all 1s;
}

.kaiguan {
  position: absolute;
  top: 20px;
  right: 50px;
  width: 40px;
  height: 20px;
  border: 2px solid black;
  border-radius: 20px;
  cursor: pointer;
  transition: all 3s;
}

.bai {

  position: absolute;
  top: 1.5px;
  left: 2px;
  height: 13px;
  width: 13px;
  background-color: rgb(0, 0, 0);
  border-radius: 50%;
  transition: all 1s;
}

.hei {

  position: absolute;
  top: 1.5px;
  right: 2px;
  height: 13px;
  width: 13px;
  background-color: rgb(11, 243, 81);
  border-radius: 50%;
  transition: all 1s;
}

学习记录~

参考博主http://t.csdn.cn/NzFLt