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 学习笔记 错误处理
Jul 30 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
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 Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Python  Django 母版和继承解析
2019/08/09 Python
Python中base64与xml取值结合问题
2019/12/22 Python
Python多进程编程常用方法解析
2020/03/26 Python
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
一个SQL面试题
2014/08/21 面试题
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
学习雷锋月活动总结
2014/07/03 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
大学生见习总结报告
2015/06/24 职场文书
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript