【倒计时】用JS写出京东倒计时效果

最新推荐文章于 2024-03-12 17:47:06 发布

原创

最新推荐文章于 2024-03-12 17:47:06 发布 · 1.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5

本文介绍如何使用JavaScript实现京东风格的倒计时效果。首先展示了一个基础的倒计时代码，接着详细解析了针对京东倒计时效果的实现，包括核心JS逻辑以及如何结合HTML和CSS进行展示。欢迎指出改进意见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.倒计时效果

这是一段简单的倒计时代码，倒计时效果将基于此代码进行修改

<script>
        function getDaojishi(time) {
            var date = +new Date();//返回当前时间总毫秒数
            var now = +new Date(time);//返回用户输入时间总毫秒数
            var times = (now - date) / 1000;//剩余时间总秒数
            var t = parseInt(times / 60 / 60 / 24);//天
            t = t < 10 ? '0' + t : t;
            var h = parseInt(times / 60 / 60 % 24);//小时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);//分钟
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);//秒
            s = s < 10 ? '0' + s : s;
            return t + '天' + h + '小时' + m + '分钟' + s + '秒'
        }
        var shijian = getDaojishi('2022-7-1 00:00:00');
        console.log(shijian);
        var dates = new Date();
        console.log(dates);
    </script>