新年倒计时

最新推荐文章于 2024-07-25 11:52:08 发布

山河曦晨

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量269

点赞数

分类专栏：笔记文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_53374733/article/details/126860807

版权

笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!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%2Fn.sinaimg.cn%2Ftranslate%2F145%2Fw2048h1297%2F20190205%2FXSus-hsqyiwt3905739.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663915339&t=23293cf3b5cd73684fd3e53c372f44d6');
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main{
            width: 500px;
            height: 270px;
            /* background-color: beige; */
            box-shadow: 0px 0px 10px white;
        }
        main h1{
            text-align: center;
            font-size: 45px;
            color: white;
        }
        main div{
            display: flex;
            font-size: 25px;
            width: 60%;
            margin: 0 auto;
            justify-content: space-between;
            color: white;
        }
    </style>
</head>
<body>
    <main>
        <h1>新年倒计时</h1>
        <div>
            <p id="day">150</p><p>天</p>
            <p id="hour">20</p><p>时</p>
            <p id="min">35</p><p>分</p>
            <p id="sec">20</p><p>秒</p>
        </div>
    </main>
</body>
<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')

    // 获取当前距离197.1.1的毫秒数
    var nowS=now.getTime()
    // 获取过年距离197.1.1的毫秒数
    var yearS=yearDate.getTime()
    // console.log(nowS,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))
    console.log(hour);
    // 计算相差的秒数
    var min=Math.floor(numS%(24*60*60)%(60*60)/60)
    console.log(min);
    // 计算相差的秒
    var sec=Math.floor(numS%(24*60*60)%(60*60)%60)
    console.log(sec);
    d.innerHTML=day;
    h.innerHTML=hour;
    m.innerHTML=min;
    s.innerHTML=sec;
        
    }, 1000);
</script>
</html>