JS14- 时间戳(倒计时)

一.时间戳

   在JavaScript程序中,所谓的时间戳,指的是
        当前时间和 格林尼治时间 197011,000,相差的毫秒数
简单理解,就是从 格林尼治时间 197011,000,到现在,过了多少毫秒     


var d = new Date();

var times = d.getTime();

console.log(times);


实际项目中,时间戳,往往用于计算时间,来衡量时间差
例如 : 秒杀倒计时  
    秒杀 是 41000秒开始
41000秒 这个时间有 时间戳
当前时间 也会有 时间戳
两个时间戳相减 结果是 两个时间之间的时间差,单位是毫秒
再将这个毫秒,转化为 天,小时,分钟,,就是我们要的结果

获取202041000秒的时间戳
获取指定时间的时间对象, Date()参数是要获取的时间的字符串
    '年-月-日 空格 小时:分钟:秒'
有参数,获取指定时间的时间对象
var end = new Date('2020-4-1 0:0:0');

当前的时间对象,没有参数,获取当前时间对象
var start = new Date();

计算时间差,应该是 最终的事件的时间戳,减去当前时间的时间戳
时间单位是 毫秒, 需要转化为秒 1= 1000毫秒
转化的秒数,是小数,我们只要整数部分,取整
parseInt()   Math.ceil()   Math.floor()   

var times = parseInt( (end.getTime() - start.getTime() ) / 1000 ) ;

console.log(times);

我们要实现倒计时效果,也就是每间隔一秒,获取一次当前时间,计算一下时间差
将结果写入到页面中

在这里插入图片描述

二.倒计时最终代码:

   <div id="d"></div>

    <script>
        function setTime(end){
            var endTime = new Date(end);
            var startTime = new Date();
            var times = parseInt( ( endTime.getTime() - startTime.getTime() ) / 1000 );
        
            var day = parseInt(times / (24*60*60));
            var hours =  parseInt( (times % (24*60*60)) / (60*60) );
            var minute = parseInt( (times % (60*60)) / (60) );
            var second = times % 60;
        
            return  `距离终止时间,还有${day}天,${hours}小时,${minute}分钟,${second}秒`;
        }

        d.innerHTML = setTime('2020-4-1 0:0:0');

        setInterval( function(){
            d.innerHTML = setTime('2020-4-1 0:0:0');
        }  , 1000 );
    </script>

三.倒计时代码说明过程:

需要将时间差的秒数 转化为 天,小时,分钟,秒等信息

`1,将秒,转化为天`
秒数 / 一天的秒数  对结果取整 只获取整数部分
parseInt() 或者 Math.floor()


var day = parseInt( times / (24*60*60) ) ;
console.log(day);


`2, 将 转化为 天数之后, 剩余的秒数, 转化为 小时`
    而不是所有的秒数

方法1: 总秒数 - 天数所代表的秒数 --- 是我们要转化为小时的秒数
var a = times - day*(24*60*60);
console.log(a);

方法2: 总秒数 % 一天的秒数  求余数
        将所有的秒数,都转化为天,之后剩余的余数,就是我们要求的数值,也就是转化为小时的秒数
var b = times % (24*60*60);
console.log(b);

转化为小时的秒数 / 一小时有多少秒  结果,获取整数部分


var hour = parseInt( ( times % (24*60*60) ) / (60*60) );
console.log(hour);


`3 , 将 剩余的秒数,转化为分钟`
方法1:总秒数 - 天数的秒数 - 小时的秒数  
方法2: 总秒数 % 小时的秒数  

   剩余的秒数 / 分钟的秒数  获取整数部分


var minute  = parseInt( ( times % (60*60) ) / 60 );
console.log(minute);


`4 , 求剩余的秒数`
方法1 : 总秒数 - 天的秒数 - 小时的秒数 - 分钟的秒数
方法2 : 总秒数 % 一分钟的秒数


var second = times % 60 ;
console.log(second);

document.write( `距离结束时间,还有${day}天,${hour}小时,${minute}分钟,${second}秒,请您抓紧时间付款,或者找老公付款` );

四.倒计时demo详解:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值