javascript實現(xiàn)時間日期的格式化的方法匯總

更新時間：2020年08月06日 10:04:02 作者：ziazan

這篇文章主要介紹了javascript實現(xiàn)時間日期的格式化的方法匯總，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

有的時候，我們需要一定格式的時間比如 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;			
}

輸出結果：

輸出結果

前置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 的數(shù)組：

var preArr = Array.apply(null,Array(10)).map(function(elem, index) {
		return '0'+index;
	});////開個長度為10的數(shù)組 格式為 ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"]

在如果數(shù)字在preArr中則群preArr[i],否則就本身的值，比如：preArr[month]||month。具體實現(xiàn)如下：

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的數(shù)組 格式為 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的數(shù)組 格式為 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 怎么快速聲明一個數(shù)組

到此這篇關于javascript實現(xiàn)時間日期的格式化的方法匯總的文章就介紹到這了,更多相關javascript實現(xiàn)時間日期的格式化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Javascript自定義函數(shù)判斷網(wǎng)站訪問類型是PC還是移動終端
如果，能夠判斷出訪問Web網(wǎng)頁的類型(PC還是移動終端)。就可以解決許多絢麗多彩的 Flash效果出不來的問題
2014-01-01
在TypeScript項目中搭配Axios封裝后端接口調用
這篇文章主要介紹了在TypeScript項目中搭配Axios封裝后端接口調用,本文記錄一下在?TypeScript?項目里封裝?axios?的過程，之前在開發(fā)?StarBlog-Admin?的時候已經(jīng)做了一次封裝，不過那時是JavaScript跟TypeScript還是有些區(qū)別的，需要的朋友可以參考下
2024-01-01
js函數(shù)般調用正則
Firefox 包含了一個非標準的 JavaScript 擴展，使正則像函數(shù)一樣可調用。
2008-04-04
webpack自動刷新瀏覽器源碼解析
Webpack自動刷新瀏覽器是一項非常實用的功能，它可以讓開發(fā)者在編輯代碼時，自動更新瀏覽器，從而節(jié)省大量的時間。那么它是如何實現(xiàn)的呢？
2023-02-02
JS延時器提示框的應用實例代碼解析
這篇文章主要介紹了JS延時器提示框的應用實例代碼解析的相關資料,需要的朋友可以參考下
2016-04-04
JavaScript數(shù)值轉換的三種方式總結
JavaScript數(shù)值轉換一般有三種方式，Number(param)函數(shù)、parseInt(param)、parseIFloat(param),下面為大家詳細介紹，需要的朋友可以參考下
2014-07-07
JS淺拷貝和深拷貝原理與實現(xiàn)方法分析
這篇文章主要介紹了JS淺拷貝和深拷貝原理與實現(xiàn)方法,結合實例形式分析了javascript淺拷貝及深拷貝相關概念、原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
2019-02-02
比較簡單的一個符合web標準的JS調用flash方法
比較簡單的一個符合web標準的JS調用flash方法...
2007-11-11
javascript SocialHistory 檢查訪問者是否訪問過某站點
今天delicious上這個名為 SocialHistory 的腳本十分引人注目。源代碼可以在這里下載。這段js代碼的功能就是判斷你的用戶有沒有訪問過某個網(wǎng)站。使用方法很簡單，例如：
2008-08-08
微信小程序開發(fā)之tabbar圖標和顏色的實現(xiàn)
這篇文章主要介紹了微信小程序開發(fā)之tabbar圖標和顏色的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10