JS/jQuery實(shí)現(xiàn)獲取時(shí)間的方法及常用類(lèi)完整示例
更新時(shí)間：2019年03月07日 11:10:08 作者：JasonHome
這篇文章主要介紹了JS/jQuery實(shí)現(xiàn)獲取時(shí)間的方法及常用類(lèi),結(jié)合完整實(shí)例形式分析了javascript針對(duì)日期時(shí)間的獲取、轉(zhuǎn)換、計(jì)算與檢測(cè)相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了JS jQuery實(shí)現(xiàn)獲取時(shí)間的方法及常用類(lèi)。分享給大家供大家參考，具體如下：
效果圖
源碼解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS獲取時(shí)間的方法及常用類(lèi)</title>
<style type="text/css">
input{
color:red;
min-width: 250px;
}
/*設(shè)置placeholder的顏色*/
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}
p{
width:100%;height:0px;border-top:1px orange dashed;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<h2>JS獲取時(shí)間的方法及常用類(lèi)</h2>
<h4>獲取當(dāng)前日期+時(shí)間</h4>
<input type="text" name="myDate">
<hr>
<h4>使用內(nèi)置的Date函數(shù)獲取javascript時(shí)間</h4>
當(dāng)前年：<input type="text" name="getFullYear">
<br>
當(dāng)前月：<input type="text" name="getMonth"> <font color="green">0-11,0代表一月份</font>
<br>
當(dāng)前日：<input type="text" name="getDate">
<br>
當(dāng)前星期：<input type="text" name="getDay"> <font color="green">0-6,0代表周日</font>
<br>
當(dāng)前時(shí)間戳(精確毫秒)：<input type="text" name="getTime"> <font color="green">從1970.1.1開(kāi)始的毫秒數(shù)</font>
<br>
當(dāng)前小時(shí)：<input type="text" name="getHours"> <font color="green">0-23</font>
<br>
當(dāng)前分鐘：<input type="text" name="getMinutes"> <font color="green">0-59</font>
<br>
當(dāng)前秒數(shù)：<input type="text" name="getSeconds"> <font color="green">0-59</font>
<br>
當(dāng)前毫秒數(shù)：<input type="text" name="getMilliseconds"> <font color="green">0-999</font>
<br>
當(dāng)前日期：<input type="text" name="nowDate">
<br>
當(dāng)前時(shí)間：<input type="text" name="nowTime">
<br>
當(dāng)前日期+時(shí)間：<input type="text" name="nowDateAddNowTime">
<br>
<hr>
<h4>日期時(shí)間腳本庫(kù)方法列表</h4>
判斷閏年：
<input type="radio" name="isLeapYears" value="1">閏年
<input type="radio" name="isLeapYears" value="0">非閏年
<p></p>
日期格式化：
<br/>
年份(YYYY/yyyy):<input type="text" name="formatYear1"> (YY/yy)：<input type="text" name="formatYear2">
<br/>
月份(MM):<input type="text" name="formatMonth1"> (M):<input type="text" name="formatMonth2">
<br/>
星期(W/w):<input type="text" name="formatWeek">
<br/>
日(DD/dd):<input type="text" name="formatDay1"> (D/d)：<input type="text" name="formatDay2">
<br/>
時(shí)(HH/hh):<input type="text" name="formatHour1"> (H/h)：<input type="text" name="formatHour2">
<br/>
分(mm):<input type="text" name="formatMinute1"> (m)：<input type="text" name="formatMinute2">
<br/>
秒(SS/S):<input type="text" name="formatSecond1"> (ss/s)：<input type="text" name="formatSecond2">
<br/>
<p></p>
日期天數(shù)差:日期格式Y(jié)YYY-MM-dd
<br>
起始日期:<input type="text" name="s_date" value="2018-08-01" />
截止日期:<input type="text" name="e_date" value="2018-08-06" />
日期差天數(shù):<input type="text" name="diff_date">
<p></p>
日期計(jì)算:返回對(duì)象數(shù)據(jù)格式:"2018-08-06T06:29:49.000Z",可以調(diào)用對(duì)象的方法，比如getFullYear();
<br>
當(dāng)前日期:<input type="text" name="date_now"><br/>
2秒后的時(shí)間:<input type="text" name="second_now"><br/>
2小時(shí)后的時(shí)間:<input type="text" name="hour_now"><br/>
2天后的時(shí)間:<input type="text" name="day_now"><br/>
2周后的時(shí)間:<input type="text" name="week_now"><br/>
一季度后的時(shí)間:<input type="text" name="quarter_now"><br/>
一個(gè)月后的時(shí)間:<input type="text" name="month_now"><br/>
一年后的時(shí)間:<input type="text" name="year_now"><br/>
<p></p>
重載toString方法:"一"=====>"星期一"
<br>
<input type="text" name="reset_string">
<P></P>
日期合法性校驗(yàn)(年月日):正確格式Y(jié)YYY-MM-DD 或者 YYYY/MM/DD
<br>
輸入日期：
<input type="text" name="checkDate" placeholder="YYYY-MM-DD或YYYY/MM/DD">
<input type="button" name="checkInputDate" value="檢驗(yàn)" style="width:50px;">
<p></p>
日期合法性校驗(yàn)(年月日 時(shí)分秒):正確格式Y(jié)YYY-MM-DD HH:II:SS
<br>
輸入日期：
<input type="text" name="checkDate1" placeholder="YYYY-MM-DD HH:II:SS">
<input type="button" name="checkInputDate1" value="檢驗(yàn)1" style="width:50px;">
<hr>
日期分割成數(shù)組:
<input type="text" name="splitDate"> <font color="green">取年份</font>
<script type="text/javascript">
$(function(){
//獲取當(dāng)前日期+時(shí)間
var myDate = new Date();
var t = myDate.toLocaleString();
inputToValue('text','myDate',t);
//============================================================
//使用內(nèi)置的Date函數(shù)獲取javascript時(shí)間
var newDate = new Date();
var getFullYear = newDate.getFullYear();//當(dāng)前年
inputToValue('text','getFullYear',getFullYear);
var getMonth = newDate.getMonth();//當(dāng)前月
inputToValue('text','getMonth',getMonth);
var getDate = newDate.getDate();//當(dāng)前日
inputToValue('text','getDate',getDate);
var getDay = newDate.getDay();//當(dāng)前星期
inputToValue('text','getDay',getDay);
var getTime = newDate.getTime();//當(dāng)前時(shí)間戳(精確毫秒)
inputToValue('text','getTime',getTime);
var getHours = newDate.getHours();//當(dāng)前小時(shí)
inputToValue('text','getHours',getHours);
var getMinutes = newDate.getMinutes();//當(dāng)前分鐘
inputToValue('text','getMinutes',getMinutes);
var getSeconds = newDate.getSeconds();//當(dāng)前秒數(shù)
inputToValue('text','getSeconds',getSeconds);
var getMilliseconds = newDate.getMilliseconds();//當(dāng)前毫秒數(shù)
inputToValue('text','getMilliseconds',getMilliseconds);
var nowDate = newDate.toLocaleDateString();//當(dāng)前日期
inputToValue('text','nowDate',nowDate);
var nowTime = newDate.toLocaleTimeString();//當(dāng)前時(shí)間
inputToValue('text','nowTime',nowTime);
var nowDateAddNowTime = newDate.toLocaleString();//當(dāng)前時(shí)間
inputToValue('text','nowDateAddNowTime',nowDateAddNowTime);
//============================================================
//檢測(cè)是否為閏年，方法一
Date.prototype.isLeapYears = function(){
return (this.getYear() % 4 == 0) && (this.getYear() % 100 != 0 || this.getYear() % 400 == 0);
}
var dd1 = new Date();
//檢測(cè)是否為閏年，方法二
function checkYear(year){
return (year % 4 == 0 && (year % 100 !=0 || year % 400 !=0));
}
if(dd1.isLeapYears()){//checkYear(2018)
$("input[type='radio'][name='isLeapYears'][value='1']").prop("checked",true);
}else{
$("input[type='radio'][name='isLeapYears'][value='0']").prop("checked",true);
}
//日期格式化
Date.prototype.Format = function(formatStr){
var str = formatStr;
var Week = ['日','一','二','三','四','五','六'];
str=str.replace(/yyyy|YYYY/,this.getFullYear());
str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100));
str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():'0' + this.getMonth());
str=str.replace(/M/g,this.getMonth());
str=str.replace(/w|W/g,Week[this.getDay()]);
str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());
str=str.replace(/d|D/g,this.getDate());
str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());
str=str.replace(/h|H/g,this.getHours());
str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());
str=str.replace(/m/g,this.getMinutes());
str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());
str=str.replace(/s|S/g,this.getSeconds());
return str;
}
var dd2 = new Date();
inputToValue('text','formatYear1',dd2.Format('YYYY'));//YYYY/yyyy
inputToValue('text','formatYear2',dd2.Format('YY'));//YY/yy
inputToValue('text','formatMonth1',dd2.Format('MM'));//MM
inputToValue('text','formatMonth2',dd2.Format('M'));//M
inputToValue('text','formatWeek',dd2.Format('W'));//W/w
inputToValue('text','formatDay1',dd2.Format('DD'));//DD/dd
inputToValue('text','formatDay2',dd2.Format('d'));//dd/d
inputToValue('text','formatHour1',dd2.Format('HH'));//HH/hh
inputToValue('text','formatHour2',dd2.Format('h'));//H/h
inputToValue('text','formatMinute1',dd2.Format('mm'));//mm
inputToValue('text','formatMinute2',dd2.Format('m'));//m
inputToValue('text','formatSecond1',dd2.Format('SS'));//SS/ss
inputToValue('text','formatSecond2',dd2.Format('s'));//S/s
//日期天數(shù)差:日期格式Y(jié)YYY-MM-dd
var s_date = $("input[type='text'][name='s_date']").val();
var e_date = $("input[type='text'][name='e_date']").val();
function daysBetween(DateOne,DateTwo)
{
var OneMonth = DateOne.substring(5,DateOne.lastIndexOf ('-'));
var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ('-')+1);
var OneYear = DateOne.substring(0,DateOne.indexOf ('-'));
var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ('-'));
var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ('-')+1);
var TwoYear = DateTwo.substring(0,DateTwo.indexOf ('-'));
var cha=((Date.parse(OneMonth+'/'+OneDay+'/'+OneYear)- Date.parse(TwoMonth+'/'+TwoDay+'/'+TwoYear))/86400000);
return Math.abs(cha);
}
inputToValue('text','diff_date',daysBetween(s_date,e_date));
//日期計(jì)算，返回一段日期時(shí)間后的對(duì)象
Date.prototype.DateAdd = function(strInterval, Number) {
var dtTmp = this;
switch (strInterval) {
case 's' :return new Date(Date.parse(dtTmp) + (1000 * Number));
case 'n' :return new Date(Date.parse(dtTmp) + (60000 * Number));
case 'h' :return new Date(Date.parse(dtTmp) + (3600000 * Number));
case 'd' :return new Date(Date.parse(dtTmp) + (86400000 * Number));
case 'w' :return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));
case 'q' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number*3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());//一個(gè)季度
case 'm' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());//一個(gè)月
case 'y' :return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
}
}
var dd3 = new Date();
inputToValue('text','date_now',dd3.DateAdd('s',0));
inputToValue('text','second_now',dd3.DateAdd('s',2));//2秒后
inputToValue('text','hour_now',dd3.DateAdd('h',2));//2小時(shí)后
inputToValue('text','day_now',dd3.DateAdd('d',2));//2天后
inputToValue('text','week_now',dd3.DateAdd('w',2));//2周后
inputToValue('text','quarter_now',dd3.DateAdd('q',1));//一季度后
inputToValue('text','month_now',dd3.DateAdd('m',1));//一個(gè)月后
inputToValue('text','year_now',dd3.DateAdd('y',1));//一個(gè)年后
//重載系統(tǒng)的toString方法
Date.prototype.toString = function(showWeek)
{
var myDate= this;
var str = myDate.toLocaleDateString();//保留年/月/日
if (showWeek)
{
var Week = ['日','一','二','三','四','五','六'];
str += ' 星期' + Week[myDate.getDay()];
}
return str;
}
var dd4 = new Date();
inputToValue('text','reset_string',dd4.toString("一"));
//日期合法性校驗(yàn)，格式:YYYY-MM-DD或者YYYY/MM/DD,特殊情況如YYYY-MM/DD也能通過(guò)，后期處理
function checkAndGetValue(DateStr)
{
var sDate=DateStr.replace(/(^\s+|\s+$)/g,''); //去兩邊空格;
if(sDate=='')
return false;
//正則表達(dá)式
patter = /^[\d]{4,4}[-/]{1}[\d]{1,2}[-/]{1}[\d]{1,2}$/;//不能加雙引號(hào)
if(patter.test(sDate)){
var t = new Date(sDate.replace(/\-/g,'/'));
var ar = sDate.split(/[-/:]/);
if(ar[0] != t.getFullYear() || ar[1] != t.getMonth()+1 || ar[2] != t.getDate()){
return false;
}else{
return ar.join("-");
}
}else{
return false;
}
}
$("input[type='button'][name='checkInputDate']").click(function(){
$_a = $("input[type='text'][name='checkDate']");
var getCheckDateValue = $_a.val();
if(checkAndGetValue(getCheckDateValue)){
alert("校驗(yàn)通過(guò)：" + checkAndGetValue(getCheckDateValue));
}else{
$_a.val("");//不通過(guò)，清空輸入的值
alert("校驗(yàn)不通過(guò)");
}
});
//日期合法性校驗(yàn) YYYY-MM-DD HH:II:SS
function CheckDateTime(DateStr)
{
var reg = /^(\d+)-(\d{1,2})-(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
var r = DateStr.match(reg);
if(r==null) return false;
r[2] = r[2]-1;
var d = new Date(r[1],r[2],r[3],r[4],r[5],r[6]);
if(d.getFullYear() != r[1]) return false;
if(d.getMonth() != r[2]) return false;
if(d.getDate() != r[3]) return false;
if(d.getHours() != r[4]) return false;
if(d.getMinutes() != r[5]) return false;
if(d.getSeconds() != r[6]) return false;
return true;
}
$("input[type='button'][name='checkInputDate1']").click(function(){
$_a = $("input[type='text'][name='checkDate1']");
var getCheckDateValue1 = $_a.val();
if(CheckDateTime(getCheckDateValue1)){
alert("校驗(yàn)通過(guò)");
}else{
$_a.val("");//不通過(guò)，清空輸入的值
alert("校驗(yàn)不通過(guò)");
}
});
//把日期分割成數(shù)組
Date.prototype.toArray = function()
{
var myDate = this;
var myArray = Array();
myArray[0] = myDate.getFullYear();
myArray[1] = myDate.getMonth() + 1;
myArray[2] = myDate.getDate();
myArray[3] = myDate.getHours();
myArray[4] = myDate.getMinutes();
myArray[5] = myDate.getSeconds();
return myArray;
}
var dd5 = new Date();
$("input[name='splitDate']").val(dd5.toArray()[0]);
//通用函數(shù)
function inputToValue(type,name,value){
$("input[type="+ type +"][name="+ name +"]").val(value);
}
})
</script>
</body>
</html>
感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
PS：這里再為大家推薦幾款比較實(shí)用的天數(shù)計(jì)算在線(xiàn)工具供大家使用：
在線(xiàn)日期/天數(shù)計(jì)算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線(xiàn)日期計(jì)算器/相差天數(shù)計(jì)算器：
http://tools.jb51.net/jisuanqi/datecalc
在線(xiàn)日期天數(shù)差計(jì)算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
在線(xiàn)天數(shù)計(jì)算器：
http://tools.jb51.net/jisuanqi/datejsq
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript時(shí)間與日期操作技巧總結(jié)》、《JavaScript+HTML5特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要源碼解讀了Bootstrap導(dǎo)航，介紹了Bootstrap各式各樣的導(dǎo)航,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
javascript實(shí)現(xiàn)十秒鐘后注冊(cè)按鈕可點(diǎn)擊的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)十秒鐘后注冊(cè)按鈕可點(diǎn)擊的方法,涉及javascript時(shí)間及樣式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
詳細(xì)聊聊TypeScript中any unknown never和void的區(qū)別
這篇文章主要給大家聊聊TypeScript 中 any、unknown、never 和 void 有什么區(qū)別，文中有詳細(xì)的代碼實(shí)例講解，具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
本文給大家分享的是個(gè)人對(duì)于12306的新的驗(yàn)證碼系統(tǒng)的破解思路，僅僅是思路，還沒(méi)進(jìn)行實(shí)地驗(yàn)證，推薦給大家，拋磚引玉吧。2015-03-03
這篇文章主要介紹了TypeScript接口，接口的作用就是為這些類(lèi)型命名和為你的代碼或第三方代碼定義契約。下面我們一起進(jìn)入文章看看TypeScript接口得具體定義吧,需要的朋友也可以參考一下2021-12-12
解決layer.open彈出框不能獲取input框的值為空的問(wèn)題
今天小編就為大家分享一篇解決layer.open彈出框不能獲取input框的值為空的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
在js代碼拼接dom對(duì)象到頁(yè)面上的模板總結(jié)
今天小編就為大家分享一篇關(guān)于在js代碼拼接dom對(duì)象到頁(yè)面上的模板總結(jié)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2018-10-10
JS生態(tài)系統(tǒng)加速Tailwind?CSS工作原理探究
這篇文章主要為大家介紹了JS?生態(tài)系統(tǒng)加速Tailwind?CSS使用及工作原理探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
關(guān)于ES6新特性最常用的知識(shí)點(diǎn)匯總
日常開(kāi)發(fā)中寫(xiě)的 JavaScript 代碼,會(huì)用到ES6的部分新特性,所以下面這篇文章主要給大家介紹了關(guān)于ES6新特性最常用的知識(shí)點(diǎn),文章總結(jié)的非常全面,需要的朋友可以參考下2021-11-11
本文主要介紹了詳解ajax、fetch、axios的區(qū)別，眾所周知它們都用來(lái)發(fā)送請(qǐng)求，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01