关于JavaScript获取时间函数及实现倒计时

贾庆遥

一个搞笑的前端

JavaScript获取当前时间函数

var time=new Date()

获取时间函数

Date() 返回当日的日期和时间。

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。

getMonth() 从 Date 对象返回月份 (0 ~ 11)。

getFullYear() 从 Date 对象以四位数字返回年份。

getYear() 请使用 getFullYear() 方法代替。

getHours() 返回 Date 对象的小时 (0 ~ 23)。

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。

getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

特别地, getDay() 返回的周是(0~6)

getMonth() 返回的是(0~11)

同理,下面的set函数亦是如此:

特别地,setMonth(0)表示将日期设置为上个月的最后一天

设置时间函数

setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。

setMonth() 设置 Date 对象中月份 (0 ~ 11)。

setFullYear() 设置 Date 对象中的年份（四位数字）。

setYear() 请使用 setFullYear() 方法代替。

setHours() 设置 Date 对象中的小时 (0 ~ 23)。

setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。

setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。

setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。

setTime() 以毫秒设置 Date 对象。

日期的格式转化

toSource() 返回该对象的源代码。

toString() 把 Date 对象转换为字符串。

toTimeString() 把 Date 对象的时间部分转换为字符串。

toDateString() 把 Date 对象的日期部分转换为字符串。

toGMTString() 请使用 toUTCString() 方法代替。

toUTCString() 根据世界时，把 Date 对象转换为字符串。

toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。

toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。

toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。

小案例：倒计时

在页面上出现一个倒计时

1. 获取两个时间节点之间的时间差

1-1. 准备两个时间节点

1-2. 使用 timeDiff 方法获取两个时间节点之间的时间差

2. 写一个定时器, 每间隔一秒钟执行一次

2-1. 书写一个间隔定时器 setInterval()

2-2. 哪些代码写在定时器里面

每间隔一秒钟获取一次当前时间

每间隔一秒钟计算一次时间差

每间隔一秒钟写入页面一次

3. 把得到的时间差写入页面里面

3-1. 组装一个 html 格式的字符串

3-2. 获取页面中现在存在的 p 标签

3-3. 把我组装好的字符串使用 innerHTML 属性写入到 p 标签内

HTML代码

<h3>距离明天放学还有 : </h3>

</p>

</div>

JavaScript代码

var time1 = new Date('2020-5-24 12:50:33')

// var time2 = new Date()

// 1-2. 获取时间差

// var res = fn(time1)

// console.log(res)

// 3-2. 获取 p 标签

var p = document.querySelector('div p')

// 2-1. 书写一个定时器

setInterval(function () {

// 这里的代码才会每间隔一秒执行一次

// 2-2. 获取时间差

var res = fn(time1)

// 3. 写入页面里面

// 3-1. 每间隔一秒都要组装一次最新的字符串

var str = '<span>' + res.day + '天</span><span>' + res.hours + '小时</span><span>' + res.minutes + '分钟</span><span>' + res.seconds + '秒钟</span>'

// 3-2. 获取 p 元素, 因为不需要每间隔一秒都获取一次

// 所以这段代码写在定时器外面

// 3-3. 因为每间隔一秒都要覆盖式的写入一次

// 要在这里把我们准备好的 str 写入 p 标签内容

p.innerHTML = str

}, 1000)

获取时间戳的函数代码

function fn(time1){

var a=new Date()

b=Math.floor(Math.abs(a.getTime()-time1.getTime())/1000)//毫秒

var day = Math.floor( b / (60 * 60 * 24) )//天

var hours = Math.floor(b % (60 * 60 * 24) / (60 * 60) )//小时

var minutes = Math.floor( b % (60 * 60) / 60 )//分钟

var seconds = b % 60//秒

var obj={}

obj.day=day

obj.hours = hours

obj.minutes = minutes

obj.seconds = seconds

return obj

}

发布于 2020-05-23 14:49

JavaScript 编程

JavaScript 入门

JavaScript