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

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

在处理过程中需要把时间戳转为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>
<!--这里添加一个自定义属性time用来直接放入时间-->
<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);
}
}

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. CHENGDU3-Restful API 接口规范、django-rest-framework框架

    Restful API 接口规范.django-rest-framework框架 问题:什么是API? 答:API是接口,提供url. 接口有两个用途: 为别人提供服务,前后端分离. 为什么使用前后端 ...

  2. Python-数据类型之数字

    一:数字类型概述 数字提供了标量存储和直接访问,属于不可变数据类型,所谓不可变,我们可以认为,更改数字的值会生成一个新的对象 # id可以唯一表示一个对象 age =18 print(id(age)) ...

  3. ubuntu 下配置munin

    环境: "Ubuntu 13.10" 安装: apt-get install munin munin-nodeapt-get install apache2 配置: 1. vim ...

  4. SQL语法汇总

    以下默认为mySQL与SQLsever都能使用SQLsever不能使用的另外标出来了 显示数据库SHOW DATABASES;进入其中一个数据库USE students;显示进入数据库中的所有表SHO ...

  5. python基础面试题(一)

    1.   简述Python代码的运行机制 1.把原始代码编译成字节码         编译后的字节码是特定于Python的一种表现形式,它不是二进制的机器码,需要进一步编译才能被机器执行. 2.把编译 ...

  6. python---冒泡和短冒泡排序

    冒泡是最费时的排序,但可以自定义更多步骤. 短冒泡确实可以加快性能. # coding = utf-8 # ========冒泡排序======== def bubble_sort(a_list): ...

  7. Windows 7下java SDK下载、安装及环境变量设置

    第一步:下载Java JDK   1 登录官网站下载正版JDK   2 点击"SDK Download"进入Java JDK下载页面 注明: Java JDK和Java JRE区别 ...

  8. 【HDU】HDU5664 Lady CA and the graph

    原题链接 题解 距离省选只有一周了我居然才开始数据结构康复计划 这题很简单,就是点分树,然后二分一个值,我们计算有多少条路径大于这个值 对于一个点分树上的重心,我们可以通过双指针的方法求出它子树里的路 ...

  9. MyEclipse 8.6 下载

    Downloads: MyEclipse 8.6 for Eclipse Galileo Windows http://downloads.myeclipseide.com/downloads/pro ...

  10. python 将列表(也可以是file.readlines())输出多个文件

    open_diff = open('yanggao.txt', 'r',encoding='utf-8')diff_line = open_diff.readlines() diff_match_sp ...