关于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 格式的字符串
<span>1天</span><span>1小时</span><span>1分钟</span><span>1秒钟</span>
3-2. 获取页面中现在存在的 p 标签
3-3. 把我组装好的字符串使用 innerHTML 属性写入到 p 标签内
效果展示
HTML代码
代码片
.
<div class="box">
<h3>距离明天放学还有 : </h3>
<p class="time">
</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
}
PS:如果想获取更多的知识视频,加QQ好友10398975免费送给大家_。
今天的文章关于JavaScript获取时间函数及实现倒计时分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/9219.html