js模仿倒计时案例

最新推荐文章于 2024-06-16 12:11:30 发布

MyikJ

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量119

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48893653/article/details/113807406

版权

一：模仿倒计时

京东倒计时图
1.代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模仿京东倒计时案例</title>
    <script>
       /*  ① 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒
        相减，比如 05 分减去25分，结果会是负数的。
        ② 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时
        间的毫秒数。
        ③ 把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
        转换公式如下：
         d = parseInt(总秒数 / 60 / 60 / 24); // 计算天数
         h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时
         m = parseInt(总秒数 / 60 % 60); // 计算分数
         s = parseInt(总秒数 % 60); // 计算当前秒数 */

        // 将倒计时的功能封装为方法
        // 参数time用来接收用户传入的时间
        function countdown(time) {
            // 1. 获取当前系统的时间
            var nowTime = +new Date();

            // 2.获取用户输入的时间的毫秒数
            var inputTime = +new Date(time);

            // 3.用户输入时间的毫秒数减去系统当前时间的毫秒数,这样拿到了相差的毫秒数，我要转换为秒，这样好计算
            var times = (inputTime - nowTime) / 1000;   // times拿到的是秒

            // 4.计算得出秒数之后，就可以进行转换了
            // var day = times / 60 / 60 / 24; // 天，因为这样不够精确，会存在小数点，所以转换为整数
            var day = parseInt(times / 60 / 60 / 24);
            day = day < 10 ? '0' + day : day;
            var hours = parseInt(times / 60 / 60 % 24);
            hours = hours < 10 ? '0' + hours : hours;
            var minutes = parseInt(times / 60 % 60);
            minutes = minutes < 10 ? '0' + minutes : minutes;
            var seconds = parseInt(times % 60);
            seconds = seconds < 10 ? '0' + seconds : seconds;

            return day + '天' + hours + '时' + minutes + '分' + seconds + '秒';
        }

        var result = countdown('2021-2-14 14:00:00');
        console.log(result);

        // 获取以下当前日期，验证是否正确
        var nowDate = new Date();
        console.log(nowDate);
    </script>
</head>

<body>

</body>

</html>

2.运行结果：
结果展示

MyikJ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
js模仿倒计时案例

一：模仿倒计时1.代码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模仿京东倒计时案例</title> <script>
复制链接

扫一扫