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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
理解javascript模块化
Mar 28 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
详解webpack+express多页站点开发
Dec 22 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
PHP6 mysql连接方式说明
2009/02/09 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
PHP开发注意事项总结
2015/02/04 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
Vue自定义属性实例分析
2019/02/23 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
JS实现拼图游戏
2021/01/29 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
详解Django框架中的视图级缓存
2015/07/23 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
社区中秋节活动方案
2014/01/29 职场文书
团购业务员岗位职责
2014/03/15 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
搞笑老公保证书
2015/02/26 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
演讲开场白台词大全
2015/05/29 职场文书