Date对象实现倒计时效果

408 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第15天,点击查看活动详情

我正在参加码上掘金体验活动,详情:show出你的创意代码块

在很多时候我们能看到页面上有时间的显示或者倒计时的显示,那么倒计时是怎么实现的呢?

Date对象

JS为我们内置好了Date对象,用于处理日期和时间。日期对象通过new Date()创建。

let d = new Date()

Date getFullYear()

let d = new Date();
let year = d.getFullYear();

上述方法可以得到现在的年份。

let d = new Date("July 21, 1983 01:15:00");
let n = d.getFullYear();

上述方法输出1983,可以得到指定时间的年份。

方法用法
getFullYear()返回指定日期的年份(1000 年到 9999 年之间的日期的四位数字)
getMonth()根据本地时间返回指定日期的月份(从 0 到 11
getDate()返回指定日期在月中的第几天(从 1 到 31)
getHours()返回指定日期和时间的小时数(从 0 到 23)
getMinutes()返回指定日期和时间的分钟数(从 0 到 59)
getSeconds()返回指定日期和时间的秒数(从 0 到 59)

以上是这个程序运用到的方法,也是日期对象中比较常用的方法。要注意的是getMonth()返回的月份从0到11,使用的时候通常加1以达到得到准确月份的目的。

倒计时

let nowTime = + new Date()
let inputTime = + new Date('2222-12-31 21:00:00')
let times = inputTime - nowTime

上面的语句返回当前时间的总毫秒数和2222年12月31号的总毫秒数,+号是强制类型转换,返回的将是Number类型的数据。通过相减得到当前时间距离2222年12月31号的毫秒数。

let d = parseInt(times / 1000 / 60 / 60 / 24);
let h = parseInt(times / 1000 / 60 / 60 % 24);
let m = parseInt(times / 1000 / 60 % 60);
let s = parseInt(times / 1000 % 60);

通过一些数学计算得到倒计时得效果。