JS将日期转为距现在的时间长度

灰太狼 2022-04-15 01:10 190阅读 0赞

最近在弄一个回忆网站，其中有个一板块类似于情侣空间的纪念日。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70]照着弄了个类似的，效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70 1]  
在处理过程中需要把时间戳转为`Date()`对象，然后与本地时间相减获得时间差，通过运算转换成对应的年月日时长，最后转换成对应的字符串。这里我将这一系列操作封装成一个`dateConver()`函数。  
下面给出源码。

--------------------

### HTML部分 ###

<div data-sjsel="flatty">
          <div class="card">
            <img class="card__picture" src="./images/item-1.jpg" />
            <div class="card-infos">
              <h2 class="card__title">2016-09-05</h2>
              
              <p class="card__text" time="2016-09-05"></p>
            </div>
          </div>
        </div>

### JavaScript部分 ###

const dateConver= time => { 
      //获取当前时间对象
      const now = new Date();
      //将传入的时间戳格式转为Date对象可以识别的格式，并将其转为一个Date()对象
      const formatTime = new Date(time.replace(/-/g, "/"));
      //格式化时间，直接相减为毫秒数，这里转为天数。
      const daysLong = Math.ceil(
        (Date.parse(now) - Date.parse(formatTime)) / (1000 * 60 * 60 * 24)
      );
      //下面获取整年整月天数，注意这里的年和月需要舍去小数部分。
      //注意这里的年月日都是近似值，一个月30天，一年365日
      let years = Math.floor(daysLong / 365) > 0 ? Math.floor(daysLong / 365) : "";
      let months =
        Math.floor((daysLong - years * 365) / 30) > 0
          ? Math.floor((daysLong - years * 365) / 30)
          : "";
      let days =
        daysLong - years * 365 - months * 30 > 0
          ? daysLong - years * 365 - months * 30
          : "";
      console.log(days + " " + months + " " + years);
      // 根据是否有整值重新赋值为字符串，方便直接返回一个完整的字符串。
      years = years ? years + "年" : "";
      months = months ? months + "个月" : "";
      days = days ? days + "天" : "";
    
      return `${ time}<br/>已经${ years}${ months}${ days}了<span>${ daysLong}天</span>`;
    
    
    //这里使用JQ获取所有带有自定义属性time的DOM元素 
    const timeLine = $("p[time]");
    for (const ele in timeLine) { 
      if (timeLine.hasOwnProperty(ele)) { 
        const element = timeLine[ele];
        // 读取元素的time属性值
        const time = element.getAttribute("time");
        element.innerHTML = dateConver(time);
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70]: /images/20220415/2f00618b7e5a406cbcc5ae94f9fa7a06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70 1]: /images/20220415/83eba4820db84d97a62e74266966accc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关如何在php中针对距现在时间长短显示不同时间格式

这里我将距现在的时间赋值给 p t i m e 将格式化的 ptime 将格式化的 ptime将格式化的ptime赋值给$gtime 将两个时间格式化保留年月日，判

偏执的太偏执、/ 2023年06月22日 03:18/ 0 赞/ 267 阅读

相关发布距今时间js

<view>{ { time}}</view> data() { return { time:'', }

阳光穿透心脏的1/2处/ 2023年01月11日 09:26/ 0 赞/ 159 阅读

相关 mybatis将时间都转为日期进行比较

<if test="createTime != null and createTime != ''"> and DATE_FOR

迷南。/ 2022年12月23日 09:52/ 0 赞/ 175 阅读

相关 js获取距今多少天的日期

getStartOrEndDate(param){ var date1 = new Date(); var date2 = new Date

旧城等待，/ 2022年11月24日 14:20/ 0 赞/ 245 阅读

相关 moment将时间戳转为指定时区的日期格式

![在这里插入代码片][20210201113535857.png] America/New\_York 为美国UTC-5时区. updateTime 为后端返回的毫秒

红太狼/ 2022年10月25日 14:25/ 0 赞/ 391 阅读

相关 mysql 将时间转为时间戳，将时间戳转为时间

将时间转为时间戳 `SELECT UNIX_TIMESTAMP(STR_TO_DATE('2019-02-03 09:00:00','%Y-%m-%d %H:

r囧r小猫/ 2022年04月23日 11:14/ 0 赞/ 264 阅读

相关 JS将日期转为距现在的时间长度

最近在弄一个回忆网站，其中有个一板块类似于情侣空间的纪念日。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

灰太狼/ 2022年04月15日 01:10/ 0 赞/ 191 阅读

相关 js将字符串转化为日期时间格式

function timeTransform(ele) { var time=$(ele).val(); var d = new Dat

谁践踏了优雅/ 2022年04月08日 13:08/ 0 赞/ 745 阅读

相关字符串转为日期，日期转为字符串

//获取当前时间到毫秒值 Date d = new Date(); System.out.println("当前时

喜欢ヅ旅行/ 2021年12月17日 03:11/ 0 赞/ 506 阅读

相关 js将时间戳转为时间日期格式

封装方法 getBeforeDate(num, time) { let n = num; let d

小咪咪/ 2021年09月08日 23:38/ 0 赞/ 551 阅读