typecho主题开发 — 巧妙运用时间处理库Day.js(轻量级,拿来就能用)
什么是Day.js?
它是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。,文件大小只有2KB左右,下载、解析js更少。
Day.js使用实战
今天改主题时候发现原主题的js太笨重了,看着有点眼花(ps:主要是一直在重复造轮子)网上找了下最好的解决办法就是用时间处理库dayjs,一开始我也想过用moment.js,但是moment太大了这个主题用到的东西不多,Dayjs刚刚好。
主题代码分析
原主题统计网站运用日期js
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("2001-1-1"); <!-- 网站运行时间 -->
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML='已运行 <font style=color:#C40000>'+daysold+'</font> 天 <font style=color:#C40000>'+hrsold+'</font> 时 <font style=color:#C40000>'+minsold+'</font> 分<!--<font style=color:#C40000>'+seconds+'</font> 秒-->';
} show_date_time();
用了dayjs后
let qingrenjie = dayjs().diff(dayjs('<2001-1-1'), 'days')
document.getElementById('begin_time').innerHTML = qingrenjie
原生的js差不多快20行了,用来插件后的只需2行代码看着也简洁很多,这个主题中要用到很多倒计时的功能(!重复造轮子),为了方便看的不花用dayjs是最好的选择。
在dayjs中有很多的函数是我们经常可以用到的
1)初始化日期 / 时间
dayjs().format('YYYY-MM-DD'); // 初始化日期
dayjs().format('YYYY-MM-DD HH:mm:ss'); // 初始化日期时间
2)式化日期 / 时间
dayjs(value).format('YYYY-MM-DD'); // 初始化日期
dayjs(value).format('YYYY-MM-DD HH:mm:ss'); // 初始化日期时间
3)加 / 减
dayjs().add / dayjs().subtract 代表在当前时间上去加减;
dayjs(value).add / dayjs(value).subtract 代表在指定时间(value)上去加减;
dayjs().add(7, 'day').format('YYYY-MM-DD'); // 2023-05- 8 今天(2023-05-15)加上7天
dayjs().add(1, 'month').format('YYYY-MM-DD'); // 2023-06-15 今天(2023-05-15)加上一月
dayjs().subtract(2, 'year').format('YYYY-MM-DD'); // 2021-05-15 今天(2023-05-15)减去2年
dayjs().subtract(2, 'hour').format('YYYY-MM-DD HH:mm:ss'); // 2023-05-15 18:00:00 今天现在(2023-05-15 20:00:00)减去2小时
4)计算日期
dayjs().diff(dayjs('2023-5-14'), 'days') //当前日期 - dayjs()中的日期
5)参考
当前时间
dayjs()
时间字符串
dayjs('2018-06-03')
时间戳
dayjs(1528361259484)
Date 对象
dayjs(new Date(2018,8,18))
复制
dayjs().clone()
检测当前 Dayjs 对象是否是一个有效的时间
dayjs().isValid()
获取
年 : dayjs().year()
月 : dayjs().month()
日 : dayjs().date()
星期 : dayjs().day()
时 : dayjs().hour()
分 : dayjs().minute()
秒 : dayjs().second()
毫秒 : dayjs().millisecond()
设置
dayjs().set('year',2017)
dayjs().set('month',9)
增加时间并返回一个新的 Dayjs() 对象
dayjs().add(7, 'day')
dayjs().add(7, 'year')
减少时间并返回一个新的 Dayjs() 对象
dayjs().subtract(7, 'year')
dayjs().subtract(7, 'month')
返回当前时间的开头时间的 Dayjs() 对象,如月份的第一天。
dayjs().startOf('year')
dayjs().startOf('month')
返回当前时间的末尾时间的 Dayjs() 对象,如月份的最后一天。
dayjs().endOf('month')
dayjs().endOf('year')
格式化
dayjs().format()
dayjs().format('YYYY-MM-DD dddd HH:mm:ss.SSS A')
时间差
dayjs('2018-06-08').diff(dayjs('2017-06-01'),'years')
dayjs('2018-06-08').diff(dayjs('2017-06-01'),'day')
dayjs('2018-06-08').diff(dayjs('2017-06-01'),'hour')
Unix 时间戳 (毫秒)
dayjs().valueOf()
Unix 时间戳 (秒)
dayjs().unix()
返回月份的天数
dayjs().daysInMonth()
返回原生的 Date 对象
dayjs().toDate()
返回包含时间数值的数组
dayjs().toArray()
当序列化 Dayjs 对象时,会返回 ISO8601 格式的字符串
dayjs().toJSON() //2018-06-08T02:44:30.599Z
返回 ISO8601 格式的字符串
dayjs().toISOString() //2018-06-08T02:46:06.554Z
返回包含时间数值的对象
dayjs().toObject()
字符串
dayjs().toString()
检查一个 Dayjs 对象是否在另一个 Dayjs 对象时间之前
dayjs('2018-06-01').isBefore(dayjs('2018-06-02'))
检查一个 Dayjs 对象是否和另一个 Dayjs 对象时间相同
dayjs().isSame(dayjs())
检查一个 Dayjs 对象是否在另一个 Dayjs 对象时间之后
dayjs().isAfter(dayjs())
本文只是我一个学习过程的文章,后续本文会一直更新
上一篇: 动态网站开发讲课笔记
下一篇: 前端开发学习之路常用