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

照着弄了个类似的,效果如下:

在处理过程中需要把时间戳转为Date()对象,然后与本地时间相减获得时间差,通过运算转换成对应的年月日时长,最后转换成对应的字符串。这里我将这一系列操作封装成一个dateConver()函数。
下面给出源码。


HTML部分

  1. <!--因为项目为纯页面文件没有涉及到数据库,所以这里将时间写在标签里-->
  2. <div data-sjsel="flatty">
  3. <div class="card">
  4. <img class="card__picture" src="./images/item-1.jpg" />
  5. <div class="card-infos">
  6. <h2 class="card__title">2016-09-05</h2>
  7. <!--这里添加一个自定义属性time用来直接放入时间-->
  8. <p class="card__text" time="2016-09-05"></p>
  9. </div>
  10. </div>
  11. </div>

JavaScript部分


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

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

  1. 【C#】string格式的日期转为DateTime类型及时间格式化处理方法

    日期格式:yyyyMMdd HH:mm:ss(注意此字符串的字母大小写很严格) yyyy:代表年份 MM: 代表月份 dd: 代表天 HH: 代表小时(24小时制) mm: 代表分钟 ss: 代表秒 ...

  2. JS对日期时间的操作

    代码: //判断是否超期(有效期开始超过一年后算已超期) function IsEffect(effectDate) { var val = ""; var currentDate ...

  3. Js获取日期时间及其它操作

    var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1 ...

  4. 使用html+css+js实现日历与定时器,看看今天的日期和今天剩余的时间。

    使用html+css+js实现日历与定时器,看看今天的日期和今天剩余的时间. 效果图: 哎,今天就又这么过去了,过的可真快 . 代码如下,复制即可使用: <!DOCTYPE html> & ...

  5. 使用js时,如何获取系统当前时间并且得到格式为"yyyy年MM月"的日期

    1.使用js时,如何获取系统当前时间并且得到格式为"yyyy年MM月"的日期: 1 var newdate = new Date(); 2 var nowyear = newdat ...

  6. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  7. JS 操作日期

    var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...

  8. js Date 日期格式化(转)

    var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1 ...

  9. JS实现日期选择

    简单的JS实现日期选择,对于PHP来说就像是遍历一样,不过我个人觉得JS这个很有趣,随便记录一下 开始: <select name="gh_date"><opti ...

随机推荐

  1. 微信录音文件上传到服务器以及amr转化成MP3格式,linux上转换简单方法

    微信公众号音频接口开发 根据业务需求,我们可能需要将微信录音保存到服务器,而通过微信上传语音接口上传到微信服务器的语音文件的有效期只有3天,所以需要将文件下载到我们自己的服务器. 上传语音接口 wx. ...

  2. Java数据类型Stack栈、Queue队列、数组队列和循环队列的比较

    判断括号是否匹配:调用java本身 import java.util.Stack; public class Solution { public boolean isValid(String s){ ...

  3. 如何保证Redis的高可用

    什么是高可用 全年时间里,99%的时间里都能对外提供服务,就是高可用 主备切换 在master故障时,自动检测,将某个slave切换为master的过程,叫做主备切换.这个过程,实现了Redis主从架 ...

  4. Derive representation formula from Green’s identity

    This article introduces how to derive the representation formula used in BEM from Green's identity. ...

  5. Python_列表常用操作

    %d   数字 %f    浮点 %s    字符串 字符串常用功能: .strip()   默认去掉字符串两边空格#或者在括号里注明去除什么 查看列表方法:dir(列表名) .append(元素): ...

  6. Kudu的集群安装(1.6.0-cdh5.14.0)

    kudu的架构体系 下图显示了一个具有三个 master 和多个 tablet server 的 Kudu 集群,每个服务器都支持多个 tablet.它说明了如何使用 Raft 共识来允许 maste ...

  7. Codeforces 830D Singer House 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF830D.html 题解 考虑用 $dp[i][j]$ 表示深度为 $i$ 的树里,有 $j$ 条路径的方案数 ...

  8. POJ2676 Sudoku 舞蹈链 DLX

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目(传送门) 题意概括 给出一个残缺的数独,求解.SPJ 题解 DLX + 矩阵构建  (两个传送门) 代码 #includ ...

  9. web项目部署以及放到ROOT目录下

    最近度过了一个国庆长假,好几天都没有写博客了! 发布这篇案例也是希望能帮助到像我一样的菜鸟o(* ̄︶ ̄*)o,百度上面的资料都不怎么全.也没有人说明注意事项.总是这篇说一点.那个人也说补一点,最后自己 ...

  10. day 34 编程之补充内容

    生产消费者模型(必须要理解并且牢记,默写内容): from multiprocessing import Process,Queue import time,random,os def procduc ...