javascript实现时间日期的格式化的方法汇总


Posted in Javascript onAugust 06, 2020

有的时候,我们需要一定格式的 时间 比如 2017-05-12 08:48 这样的格式。
上代码先

时间格式化

第一种

function formatDate(time){
	var date = new Date(time);

	var year = date.getFullYear(),
		month = date.getMonth() + 1,//月份是从0开始的
		day = date.getDate(),
		hour = date.getHours(),
		min = date.getMinutes(),
		sec = date.getSeconds();
	var newTime = year + '-' +
				month + '-' +
				day + ' ' +
				hour + ':' +
				min + ':' +
				sec;
	return newTime;			
}

输出结果:

javascript实现时间日期的格式化的方法汇总

前置0

但是这里存在一个问题,就是,我想要的格式应该是 2017-05-12 08:49:25 在月、日、时、分、秒 小于10的时候,应该要前置一个0。
改进代码:

第二种

function formatDate(time){
	var date = new Date(time);

	var year = date.getFullYear(),
		month = date.getMonth()+1,//月份是从0开始的
		day = date.getDate(),
		hour = date.getHours(),
		min = date.getMinutes(),
		sec = date.getSeconds();
	var newTime = year + '-' +
				(month < 10? '0' + month : month) + '-' +
				(day < 10? '0' + day : day) + ' ' +
				(hour < 10? '0' + hour : hour) + ':' +
				(min < 10? '0' + min : min) + ':' +
				(sec < 10? '0' + sec : sec);

	return newTime;			
}

formatDate(new Date().getTime());//2017-05-12 09:09:21

第三种

这下格式对了。但是会不会麻烦了点?我们再试试这种
一个长度为10 的数组:

var preArr = Array.apply(null,Array(10)).map(function(elem, index) {
		return '0'+index;
	});////开个长度为10的数组 格式为 ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"]

在如果数字在preArr中则群preArr[i],否则 就本身的值,比如:preArr[month]||month。具体实现如下:

function formatDate(time){
	var date = new Date(time);

	var year = date.getFullYear(),
		month = date.getMonth()+1,//月份是从0开始的
		day = date.getDate(),
		hour = date.getHours(),
		min = date.getMinutes(),
		sec = date.getSeconds();
	var preArr = Array.apply(null,Array(10)).map(function(elem, index) {
		return '0'+index;
	});////开个长度为10的数组 格式为 00 01 02 03

	var newTime = year + '-' +
				(preArr[month]||month) + '-' +
				(preArr[day]||day) + ' ' +
				(preArr[hour]||hour) + ':' +
				(preArr[min]||min) + ':' +
				(preArr[sec]||sec);

	return newTime;			
}
formatDate(new Date().getTime());//2017-05-12 09:45:41

任意设置时间模式

第四种(推荐)

以上,都是按照固定的格式YY-MM-DD hh:mm:ss 输出的。要是产品突然说,改成2017年05月12这种格式,天啦撸,又要改o(?□?)o。那我还是写个结构好一些的吧,你们随便玩。

function formatDate(time,format='YY-MM-DD hh:mm:ss'){
	var date = new Date(time);

	var year = date.getFullYear(),
		month = date.getMonth()+1,//月份是从0开始的
		day = date.getDate(),
		hour = date.getHours(),
		min = date.getMinutes(),
		sec = date.getSeconds();
	var preArr = Array.apply(null,Array(10)).map(function(elem, index) {
		return '0'+index;
	});////开个长度为10的数组 格式为 00 01 02 03

	var newTime = format.replace(/YY/g,year)
						.replace(/MM/g,preArr[month]||month)
						.replace(/DD/g,preArr[day]||day)
						.replace(/hh/g,preArr[hour]||hour)
						.replace(/mm/g,preArr[min]||min)
						.replace(/ss/g,preArr[sec]||sec);

	return newTime;			
}
formatDate(new Date().getTime());//2017-05-12 10:05:44
formatDate(new Date().getTime(),'YY年MM月DD日');//2017年05月12日
formatDate(new Date().getTime(),'今天是YY/MM/DD hh:mm:ss');//今天是2017/05/12 10:07:45

大功告成!

参考链接:
JavaScript 怎么快速声明一个数组

到此这篇关于javascript实现时间日期的格式化的方法汇总的文章就介绍到这了,更多相关javascript实现时间日期的格式化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
node.js超时timeout详解
Nov 26 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 #Javascript
javascript读取本地文件和目录方法详解
Aug 06 #Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 #Javascript
javascript实现页面的实时时钟显示示例
Aug 06 #Javascript
Javascript如何递归遍历本地文件夹
Aug 06 #Javascript
通过vue刷新左侧菜单栏操作
Aug 06 #Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 #Javascript
You might like
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
详解flask表单提交的两种方式
2018/07/21 Python
用Python实现读写锁的示例代码
2018/11/05 Python
浅谈Python基础—判断和循环
2019/03/22 Python
keras topN显示,自编写代码案例
2020/07/03 Python
python 如何设置守护进程
2020/10/29 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
四年级数学教学反思
2014/02/02 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
个人对照检查材料
2014/02/12 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
旷课检讨书范文
2015/01/27 职场文书
大雁塔导游词
2015/02/04 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang