更新博客随机背景图和修复缓存引起的时间不一致的问题。

原创 野人  2021-01-10 15:24  阅读 9 次

一、

由于之前的博客的随机背景图(如果一篇文章中没有图片的话,就会把随机的背景图当作该文章的主图)采用了JPG的格式,而JPG是采用了有损压缩,导致了图片放大后失真了(当然这也是会跟图片的分辨率有关系)。

于是就更换为PNG了,主题颜色还是采用之前的8色调(主要也是怕忘记了,下次又要重新吸色了,还不如发文记录下)

#ffa800
#01cc01
#00ccff
#ff5f53
#9a59b5
#99cdff
#fe9acc
#ff9a66

二、

由于博客的是有装了缓存插件,所以就大家看到的数据有些是不一致的,比如下面这样子:

正确的显示应该是【9个月前】于是就动手想办法了,解决方法也很简单,就是每次进入网页后,再次重新计算文章发布的时间跟当前的时间进行比对,然后格式化输出,替换掉错误的时间即可,时间格式化代码如下:

/**
 * 时间格式化
 * @param {string} time - 传入的时间 
 * @return {string} 格式化的时间,如几年/月前...
 */
function timeFormat(time) {
  let curTime = new Date().getTime();
  let prevTime = new Date(time).getTime();
  let differentTime = Number.parseInt((curTime - prevTime) / 1000);
  let timeFormatObj = {
    '年前': 31104000,
    '个月前': 2592000,
    '周前': 604800,
    '天前': 86400,
    '小时前': 3600,
    '分钟前': 60,
    '秒': 1
  }
  if (differentTime < 1) {
    return '刚刚';
  }
  for (const key in timeFormatObj) {
    //判断时间差值是属于那个阶段的
    let judgeTime = differentTime / timeFormatObj[key];
    if (judgeTime >= 1) {
      return `${Math.round(judgeTime)}${key}`;
    }
  }
}

写这段代码的时候也遇到个坑,因为本身这代码并不复杂,结果因为基础知识不扎实导致返回的结果不正确,比如使用for in循环对象的时候,如果对象的key是个数字的话,默认会进行升序排序,比如下面这段代码:

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  "1": "USA"
};

for(let code in codes) {
  alert(code); // 1, 41, 44, 49
}

这里本来是想放个官方关于for in遍历对象的链接,但是发现并没有讲这个内容,所以就不放了。

还有一个坑是php生成的时间戳是10位(这个应该不算坑把,之前写php的时候是知道,不过给忘记了。),而js生成的是13位,所以我们就需要把这俩货转成一致的位数即可计算了(即把两个时间差值计算好之后/ 1000,然后取下整,即可。)

本文地址:http://www.yerenwz.com/2817.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了

发表评论

  1. 钟渊
    钟渊 【农民】 @回复

    老板是程序员出身吗?交流交流。