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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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(视频)Http下载
2006/12/12 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
Python常用类型转换实现代码实例
2020/07/28 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
药学专业毕业生求职信
2013/10/20 职场文书
英语自我评价范文
2014/01/24 职场文书
社区端午节活动方案
2014/01/28 职场文书
房屋转让协议书范本
2014/04/11 职场文书
十周年庆典策划方案
2014/06/03 职场文书
作风年建设汇报材料
2014/08/14 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫