JavaScript网页--跨年倒计时

心已赠人 2022-12-25 11:53 173阅读 0赞

# JavaScript网页–跨年倒计时 #

最近学弟在追一个学妹，我在帮学弟出谋划策。

学妹告诉学弟，我怕我们之间是因为这段时间接触多了你才喜欢我的。等跨年的时候，如果你还喜欢我，那个时候我再给你答案。

于是今天我帮学弟做了一个跨年倒计时的网页，希望他能够坚持下去。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>倒计时</title>
        <style>
            div {
         
                margin-top: 200px;
                margin-left: 500px;
                line-height: 50px;
                font-size: 20px;
                font-weight: 900;
            }
            
            li {
         
                float: left;
                margin: 2px;
                list-style: none;
                width: 50px;
                height: 50px;
                color:white;
                line-height: 50px;
                text-align: center;
                background-color: black;
                font-size: 20px;
                font-weight: 900;
                
            }
        </style>
    </head>
    <body>
        <div>
            <li class="text" style = "width: 135px;">跨年倒计时：</li>
            <li class="day">0</li>
            <li class="hour">1</li>
            <li class="minute">2</li>
            <li class="second">3</li>
           
        </div>
    
        <script>
            //获取元素
            var day = document.querySelector('.day');
            var hour = document.querySelector('.hour');//获取小时元素
            var minute = document.querySelector('.minute');//获取分钟元素
            var second = document.querySelector('.second');//获取秒数元素
            var inputTime = +new Date('2021-1-1 00:00:00');//输入一个时间
            countDown ();//在定时器开启之前先调用一次函数，防止一秒的空白期
            //开启定时器
            setInterval(countDown, 1000);
            function countDown (){
         
                //获取当前的时间
                var nowTime = +new Date();
                var times = (inputTime - nowTime) / 1000;//times是剩余的总秒数
                var d = parseInt(times / 60 / 60 /24);
                d = d < 10 ? '0'+ d : d;
                //将剩余的小时数给小时的盒子
                day.innerHTML = d+"天";
                //小时
                var h = parseInt(times / 60 / 60 % 24);
                h = h < 10 ? '0'+ h : h;
                //将剩余的小时数给小时的盒子
                hour.innerHTML = h+"时";
                //  分钟
                var m = parseInt(times / 60 % 60);
                m = m < 10 ? '0'+ m : m;
                //将剩余的分钟数给分钟的盒子
                minute.innerHTML = m+"分";
                //秒数
                var s = parseInt(times % 60);
                s = s < 10 ? '0'+ s : s;
                //将剩余的描述给秒的盒子
                second.innerHTML = s+"秒";
            }
        </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/f73dc89073794158b4d2be91a4e7cdf1.png