百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

JS:处理日期时间,实现格式化的方法与简单封装

xsobi 2024-12-17 17:07 2 浏览

获取当前时间,格式为:2020/07/04 17:00(此时此刻)

获取指定时间,格式为:2020/07/05 17:00(一天后,即明天的此时此刻)

一、实现思路

1. 创建一个方法,将传入的日期对象处理后,返回指定格式的字符串,先贴上代码:

// 格式化 日期时间
function formatDateTime(date = new Date()) { //不传date则默认当前时间
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let second = date.getSeconds();
  // 不足两位,添“0”
  month = month < 10 ? "0" + month: month;
  day = day < 10 ? "0" + day: day;
  hour = hour < 10 ? "0" + hour: hour;
  minute = minute < 10 ? "0" + minute: minute;
  second = second < 10 ? "0" + second: second;
  return year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;
}

// 此时此刻
let today = formatDateTime();
console.log("此时此刻:", today);

// 明天的此时此刻
let t = new Date().getTime() + 60 * 60 * 24 * 1000; //24小时后的时间戳
let tomorrow = formatDateTime(new Date(t));
console.log("明天的此时此刻:", tomorrow);

2. 代码解析:

formatDateTime():传入Date对象,获取年月日、时分秒,返回处理后的日期时间字符串;

today:调用时不传参,即获取此时此刻的日期字符串;

tomorrow:参数为明天(此时此刻)的日期字符串;

t = new Date().getTime() + 60 * 60 * 24 * 1000:当前时间戳 + 24小时的毫秒值 = 明天(此时此刻)的时间戳,且new Date(t)将时间戳转为Date对象,最终得到明天(此时此刻)的日期字符串。

控制台输出:

此时此刻: 2020/07/04 17:00明天的此时此刻: 2020/07/05 17:00

二、代码优化

1. 基于以上思路,再加入多个参数,实现自定义分隔符等,同样先贴出代码:

// 格式化 日期时间
function formatDateTime(date = new Date(), p1 = "-", p2 = ":") {
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let second = date.getSeconds();
  return [year, month, day].map(formatNumber).join(p1) + " " + [hour, minute, second].map(formatNumber).join(p2);
}

// 格式化 日期数字
function formatNumber(n) {
  n = n.toString();
  return n[1] ? n: "0" + n;
}

// 此时此刻
let today = formatDateTime(undefined, "/");
console.log("此时此刻:", today);

// 明天的此时此刻
let t = new Date().getTime() + 60 * 60 * 24 * 1000; //24小时后的时间戳
let tomorrow = formatDateTime(new Date(t), "/");
console.log("明天的此时此刻:", tomorrow);

2. 代码解析:

formatDateTime():加入分隔符参数,不传则使用默认值;

formatNumber():数字不足两位,在前面补“0”并返回;

today:传入undefined,判断不存在,即使用默认值;

tomorrow:传入自定义的日期对象。

控制台输出:

此时此刻: 2020/07/04 17:00

明天的此时此刻: 2020/07/05 17:00

三、更多

或者改为箭头函数:

// 格式化 日期时间
var formatDateTime = (date = new Date(), p1 = "-", p2 = ":") =>{
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let second = date.getSeconds();
  return [year, month, day].map(formatNumber).join(p1) + " " + [hour, minute, second].map(formatNumber).join(p2);
};

// 格式化 日期数字
var formatNumber = (n) =>{
  n = n.toString();
  return n[1] ? n: "0" + n;
};

私信发送:200704,获取代码文件(和文中内容一致)


相关推荐

js向对象中添加元素(对象,数组) js对象里面添加元素

一、添加一个元素对象名["属性名"]=值(值:可以是一个值,可以是一个对象,也可以是一个数组)这样添加进去的元素,就是一个值或对象或数组...

JS小技巧,如何去重对象数组?(一)

大家好,关于数组对象去重的业务场景,想必大家都遇到过类似的需求吧,这对这样的需求你是怎么做的呢。下面我就先和大家分享下如果是基于对象的1个属性是怎么去重实现的。方法一:使用.filter()和....

「C/C++」之数组、vector对象和array对象的比较

数组学习过C语言的,对数组应该都不会陌生,于是这里就不再对数组进行展开介绍。模板类vector模板类vector类似于string,也是一种动态数组。能够在运行阶段设置vector对象的长度,可以在末...

如何用sessionStorage保存对象和数组

背景:在工作中,我将[{},{}]对象数组形式,存储到sessionStorage,然后ta变成了我看不懂的形式,然后我想取之用之,发现不可能了~记录这次深刻的教训。$clickCouponIndex...

JavaScript Array 对象 javascript的array对象

Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0,第二个索引值为1,以此类推。更多有...

JavaScript中的数组Array(对象) js array数组

1:数组Array:-数组也是一个对象-数组也是用来存储数据的-和object不同,数组中可以存储一组有序的数据,-数组中存储的数据我们称其为元素(element)-数组中的每一个元素都有一...

数组和对象方法&amp;数组去重 数组去重的5种方法前端

列举一下JavaScript数组和对象有哪些原生方法?数组:arr.concat(arr1,arr2,arrn);--合并两个或多个数组。此方法不会修改原有数组,而是返回一个新数组...

C++ 类如何定义对象数组?初始化数组?linux C++第43讲

对象数组学过C语言的读者对数组的概念应该很熟悉了。数组的元素可以是int类型的变量,例如int...

ElasticSearch第六篇:复合数据类型-数组,对象

在ElasticSearch中,使用JSON结构来存储数据,一个Key/Value对是JSON的一个字段,而Value可以是基础数据类型,也可以是数组,文档(也叫对象),或文档数组,因此,每个JSON...

第58条:区分数组对象和类数组对象

示例设想有两个不同类的API。第一个是位向量:有序的位集合varbits=newBitVector;bits.enable(4);bits.enable([1,3,8,17]);b...

八皇后问题解法(Common Lisp实现)

如何才能在一张国际象棋的棋盘上摆上八个皇后而不致使她们互相威胁呢?这个著名的问题可以方便地通过一种树搜索方法来解决。首先,我们需要写一个函数来判断棋盘上的两个皇后是否互相威协。在国际象棋中,皇后可以沿...

visual lisp修改颜色的模板函数 怎么更改visual studio的配色

(defunBF-yansemokuai(tuyuanyanse/ss)...

用中望CAD加载LISP程序技巧 中望cad2015怎么加载燕秀

1、首先请加载lisp程序,加载方法如下:在菜单栏选择工具——加载应用程序——添加,选择lisp程序然后加载,然后选择添加到启动组。2、然后是添加自定义栏以及图标,方法如下(以...

图的深度优先搜索和广度优先搜索(Common Lisp实现)

为了便于描述,本文中的图指的是下图所示的无向图。搜索指:搜索从S到F的一条路径。若存在,则以表的形式返回路径;若不存在,则返回nil。...

两个有助于理解Common Lisp宏的例子

在Lisp中,函数和数据具有相同的形式。这是Lisp语言的一个重大特色。一个Lisp函数可以分析另一个Lisp函数;甚至可以和另一个Lisp函数组成一个整体,并加以利用。Lisp的宏,是实现上述特色的...