春节倒计时

最新推荐文章于 2024-10-03 22:12:17 发布

码农不秃呀

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量123

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_53271010/article/details/126860706

版权

<!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>
    <style>
        body{
            width: 100vw;
          height: 100vh;
            background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.yanhuo1.com%2Fupload%2Fpic%2F2012-04-06-16-49-22_799205.jpg&refer=http%3A%2F%2Fwww.yanhuo1.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663915134&t=756337b78d65a924c4a5f7b7e2d734b9');      
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main{
            width: 500px;
            height: 270px;
            /* border: 1px solid white; */
            color: white;
            box-shadow: 0px 0px 10px white;
        }
        main h1{
            text-align: center;
            font-size: 45px;
        }
        main div{
            display: flex;
            font-size: 25px;
            width: 60%;
            margin: 0 auto;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <main>
        <h1>距离春节还有</h1>
        <div>
        <p id="day">150</p><p>天</p>
        <p id="hour">1</p><p>小时</p>
        <p id="min">1</p><p>分钟</p>
        <p id="sec">1</p><p>秒</p>
        </div>
    </main>
    <script>
         var d=document.querySelector('#day')
         var h=document.querySelector('#hour')
         var m=document.querySelector('#min')
         var s=document.querySelector('#sec')
      setInterval(function(){
        //获取当前时间
      var now=new Date()
      //获取过年的时间
      var yearDate = new Date('2023-1-21 00:00:00')

      //获取当前距离1970 1.1的毫秒数
      var nowS=now.getTime()
      //获取过年距离1970 1.1的毫秒数
      var yearS=yearDate.getTime()
      //console.log(yearS);
      //计算过年和当前相差的秒数
      var numS=(yearS-nowS)/1000

      //计算相差的天数
      var day=Math.floor(numS/(24*60*60))
    //   console.log(day);
    //计算相差的小时
    var hour=Math.floor(numS%(24*60*60)/(60*60))
    //计算相差的分钟
    var min=Math.floor(numS%(24*60*60)%(60*60)/60)
    //计算相差的秒
    var sec=Math.floor(numS%(24*60*60)%(24*60*60)%60)
    console.log(day,hour,min,sec);
    d.innerHTML=day
    h.innerHTML=hour
    m.innerHTML=min
    s.innerHTML=sec
      },1000);
        


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

效果图