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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
iScroll.js 使用方法参考
May 16 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 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
php+oracle 分页类
2006/10/09 PHP
pw的一个放后门的方法分析
2007/10/08 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
医药代表个人的求职信分享
2013/12/08 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
面试自我评价范文
2014/09/17 职场文书
自主招生英文自荐信
2015/03/25 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
详解Python类和对象内容
2021/06/22 Python
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫