JavaScript编写一个倒计时

简介: JavaScript编写一个倒计时

关键js代码

   <script>
        function countdown() {
            var targetDate = new Date("2024-02-20 12:00:00");
            var currentDate = new Date();
            var timeDiff = targetDate.getTime() - currentDate.getTime();
            var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
            var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
            let time = `距离2024-01-15 12:00:00还有:${days}天${ hours}时${minutes}分${seconds}秒 `;
            document.querySelector('#div').innerHTML = time;
        }
        countdown()
        setInterval(function () {
            countdown()
        }, 1000);
    </script>

美化css代码

    <style>
        #div {
            width: 800px;
            height: 100px;
            margin: 200px auto;
            background-color: black;
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            border-radius: 20px;
        }
    </style>

运行效果:

相关文章
|
18小时前
|
前端开发 JavaScript
HTML+CSS+JS 倒计时动画效果
HTML+CSS+JS 倒计时动画效果
|
28天前
|
JavaScript 前端开发
JavaScript解决生日倒计时的问题
JavaScript解决生日倒计时的问题
18 0
|
1月前
|
JavaScript
JS利用时间戳倒计时案例
JS利用时间戳倒计时案例
|
1月前
|
移动开发 JavaScript 前端开发
分享75个JS特效倒计时,总有一款适合您
分享75个JS特效倒计时,总有一款适合您
46 0
|
1月前
h5+JavaScript实现一个倒计时功能
h5+JavaScript实现一个倒计时功能
|
1月前
|
JavaScript 前端开发 小程序
element 订单列表中 实现多个倒计时(vue+js)
element 订单列表中 实现多个倒计时(vue+js)
|
1月前
|
JavaScript
实现一个网页同时调用多个倒计时 jquery/js
实现一个网页同时调用多个倒计时 jquery/js
|
1月前
|
JavaScript
JS倒计时
JS倒计时
|
7月前
|
JavaScript 前端开发
js实现长按录制视频按钮外部转圈倒计时10秒的效果
js实现长按录制视频按钮外部转圈倒计时10秒的效果
50 0