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 相关文章推荐
图片之间的切换
Jun 26 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 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
php学习之运算符相关概念
2011/06/09 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
python使用pil生成图片验证码的方法
2015/05/08 Python
5种Python单例模式的实现方式
2016/01/14 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Python生成词云的实现代码
2020/01/14 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
商业融资计划书
2014/04/29 职场文书
爱护草坪标语
2014/06/24 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
紧急通知
2015/04/17 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript