JS 倒计时效果

今天给表弟逛网上商城看笔记本电脑时,看见有一些显示倒计时的效果,觉得蛮好的,特别去查了下,今天给大家分享下倒计时的制作,如有缺漏请大家指出。

倒计时算法我想大家都不陌生,数学公式如下:‘’倒计时=截止时间 - 现在时间‘’。好比我们在当天6点设置一闹钟在当天12点响,这中间相差的时间就是倒计时(12-6=6)小时

但不单单是这样的计算,毕竟有可能存在这种情况:截止时间(2019-8-17   3:20:10),现在时间(2019-8-16 15:35:20),这中间时分秒相减会为负数,所以一般我们会换成统一单位再进行相减,再换回去。

时间换算进制:

一天=24小时=(24*60)分=(24*60*60)秒

所以我们用时间戳来做,详细公式是:剩余时间毫秒数(倒计时)=截止时间毫秒数 - 现在时间毫秒数。

首先我们先了解怎么获取当前时间的时间戳,有以下几种方法,大家挑着用

<script>
var date=new Date();//获取当前时间

console.log(date.valueOf());
console.log(date.getTime());
console.log(+date);//等价于var date= +new  Date();最常用的
console.log(Number(date));
console.log(Date.now());//H5新增


</script>

接着就是时间戳毫秒数转换成特定的天,时,分,秒

<script>

d=parseInt(总秒数/60/60/24);//计算天数
h=parseInt(总秒数/60/60%24);//计算小时
m=parseInt(总秒数/60%60);//计算分数
s=parseInt(总秒数%60);//计算当前秒数


</script>

最后就是就是倒计时效果的实现

<script>

function conutDown(time){
      var nowTime = +new Date();//返回当前时间总的毫秒数
      var stopTime=+new Date(time);//返回的是截止时间总的毫秒数
     

      //times是剩余时间总的秒数
      var times=(stopTime - nowTime) / 1000;

       
       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+'天'+h+'时'+m+'分'+s+'秒';
     }
    console.log(conutDown('2019-8-17 12:00:00'));//截止时间自己修改哈



</script>
原文地址:https://www.cnblogs.com/smile-xin/p/11364166.html