js-css实现白天(夜晚-护眼)模式的切换 易理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{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;
         }
         .today{
             position: absolute;
             top: 1.5px;
             left: 2px;
             height: 13px;
             width: 13px;
             background-color: rgb(0, 0, 0);
             border-radius: 50%;
             transition: all 1s;
         }
        .night{
             position: absolute;
             top: 1.5px;
             right: 2px;
             height: 13px;
             width: 13px;
             background-color: rgb(11, 243, 81);
             border-radius: 50%;
             transition: all 1s;
         }
         h1{margin: 100px auto; width: 1000px; text-align: center;}
         p{margin: -60px auto;width: 1100px;text-align-last:center;}
    </style>
</head>
<body id="body" >
    <div class="switch" >
        <div class="today" id="button"></div>
    </div>
    <h1>yanbaby</h1>
    <p> life is not a bed of rose</p>
    <script>
        var button =document.getElementById('button');  //button为定义的变量 不需要和后边的'button'保持一致
        var switches = document.querySelector('.switch');
        var body = document.getElementById('body');
        var temp = 1;
        anniu.addEventListener('click',function(){
            if(temp==1){
                this.className = 'night';
                temp=0;
                kaiguan.style. border= '2px solid  rgb(11, 243, 81)';
                body.style. backgroundColor= 'rgb(7, 7, 29)';
                body.style.color = 'white';
            }else{
                this.className = 'today';
                temp=1;
                kaiguan.style. border= '2px solid black';
                body.style. backgroundColor= 'white';
                body.style.color = 'black';
            }

        })
     
    </script>
</body>
</html>

转自:https://blog.csdn.net/luo1831251387/article/details/111466260
上为完整代码,非常容易理解。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值