Javascript——电商倒计时案例

最新推荐文章于 2022-05-23 09:41:26 发布

原创最新推荐文章于 2022-05-23 09:41:26 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

javascript

56 篇文章

订阅专栏

本文介绍了如何使用JavaScript来创建电商倒计时功能。重点在于理解时间戳的概念，通过计算用户输入时间与当前时间的差值来获取剩余时间，并将其转换为天、小时、分钟和秒。核心算法涉及将总毫秒数转换为可读的时分秒格式。

格式化日期时分秒
1.通过Date总的毫秒数，不是当前时间的毫秒数，而是距离1970年1月1号过了多少毫秒数
通过valueOf() getTime()

var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());

2.简单写法（最常用写法）

var date1 = +new Date();//+new Date() 返回总的毫秒数
console.log(date1);

3.H5新增的获得总的毫秒数

console.log(Date.now());

核心算法：
输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减。
用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
把剩余时间的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）

转换公式：
d=parseInt(总秒数/60/60/24);
h=parseInt(总秒数/60/60%24);
m=parseInt(总秒数/60%60);
s=parseInt(总秒数%60);

    <script>
        function countdown(time){
            var nowTime = +new Date(); //返回的是当前时间总的毫秒数
            var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; //time是剩余时间总的毫秒数
            
            var d = parseInt(times / 60 / 60/ 24); //天
            var h = parseInt(times / 60 / 60 % 24); //时
            var m = parseInt(times / 60 % 60); //分
            var s = parseInt(times /% 60); //当前秒
            return d + '天' + '时' + m + '分' + s + '秒'；
        }
    </script>