JS将日期转为距现在的时间长度
最近在弄一个回忆网站,其中有个一板块类似于情侣空间的纪念日。
照着弄了个类似的,效果如下:
在处理过程中需要把时间戳转为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将日期转为距现在的时间长度的更多相关文章
- 【C#】string格式的日期转为DateTime类型及时间格式化处理方法
日期格式:yyyyMMdd HH:mm:ss(注意此字符串的字母大小写很严格) yyyy:代表年份 MM: 代表月份 dd: 代表天 HH: 代表小时(24小时制) mm: 代表分钟 ss: 代表秒 ...
- JS对日期时间的操作
代码: //判断是否超期(有效期开始超过一年后算已超期) function IsEffect(effectDate) { var val = ""; var currentDate ...
- Js获取日期时间及其它操作
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1 ...
- 使用html+css+js实现日历与定时器,看看今天的日期和今天剩余的时间。
使用html+css+js实现日历与定时器,看看今天的日期和今天剩余的时间. 效果图: 哎,今天就又这么过去了,过的可真快 . 代码如下,复制即可使用: <!DOCTYPE html> & ...
- 使用js时,如何获取系统当前时间并且得到格式为"yyyy年MM月"的日期
1.使用js时,如何获取系统当前时间并且得到格式为"yyyy年MM月"的日期: 1 var newdate = new Date(); 2 var nowyear = newdat ...
- AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;
js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...
- JS 操作日期
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- js Date 日期格式化(转)
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1 ...
- JS实现日期选择
简单的JS实现日期选择,对于PHP来说就像是遍历一样,不过我个人觉得JS这个很有趣,随便记录一下 开始: <select name="gh_date"><opti ...
随机推荐
- python——mysql京东数据库设计案例(源码)
# 显示界面信息# 循环界面信息# 根据用户输入数据来做相应的选择from pymysql import connect def jingdong_info(): '''#显示界面信息''' prin ...
- BZoj 2301 Problem b(容斥定理+莫比乌斯反演)
2301: [HAOI2011]Problem b Time Limit: 50 Sec Memory Limit: 256 MB Submit: 7732 Solved: 3750 [Submi ...
- 【第一部分】09Leetcode刷题
一.位1的个数 题目:191. Number of 1 Bits C++ Soution 1: class Solution { public: int hammingWeight(uint32_t ...
- js调试console.log使用总结图解
一 实例 打印字符串和对象: 可展开对象查看内部情况: 看一下console对象本身的定义情况: 输出对象情况: utag对象所在文件: 输出对象: 二 Console.log 总结 1 如果你j ...
- lojround3
A.绯色 IOI(开端) 首先注意到是完全图,数据范围又很大,肯定要观察一些性质 我们化简一下式子 发现其实是要求simga(xixj)最大 那么结论就很好想了 最大的和次大的第三大的连一起...然后 ...
- sed 简单修改配置文件ip地址
sed -i 's/old ip/new ip/g' file.txt
- 一起学Hadoop——文件的上传、分发与打包
如果我们想把文件上传到Hadoop集群中,使用put命令即可.下面的语句是将本地文件上传到hadoop集群的/目录下. hadoop fs -put fruit.txt / 下面介绍通过脚本将文件 ...
- 一起学Hadoop——Hadoop的前世今生
Hadoop是什么? Hadoop是一个处理海量数据的开源框架.2002年Nutch项目面世,这是一个爬取网页工具和搜索引擎系统,和其他众多的工具一样,都遇到了在处理海量数据时效率低下,无法存储爬取网 ...
- HTML自定义滚动条(仿网易邮箱滚动条)转载
它是使用CSS中的伪元素来实现的,主要由以下三个来完成: 1. -webkit-scrollbar:定义滚动条的样式,如长宽. 2. -webkit-scrollbar-thumb:定义滚动条上滑块的 ...
- Codeforces 1016G Appropriate Team 数论 FWT
原文链接https://www.cnblogs.com/zhouzhendong/p/CF1016G.html 题目传送门 - CF1016G 题意 给定 $n,x,y$ ,以及一个含有 $n$ 个元 ...