JS/jQuery實現獲取時間的方法及常用類完整示例

來源：懂視網責編：小采時間：2020-11-27 22:00:18

JS/jQuery實現獲取時間的方法及常用類完整示例

JS/jQuery實現獲取時間的方法及常用類完整示例:本文實例講述了JS jQuery實現獲取時間的方法及常用類。分享給大家供大家參考，具體如下：效果圖源碼解析 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>JS獲取時間的方法及

推薦度：

點擊下載本文 文檔為doc格式

導讀JS/jQuery實現獲取時間的方法及常用類完整示例:本文實例講述了JS jQuery實現獲取時間的方法及常用類。分享給大家供大家參考，具體如下：效果圖源碼解析 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>JS獲取時間的方法及

本文實例講述了JS jQuery實現獲取時間的方法及常用類。分享給大家供大家參考，具體如下：

效果圖

源碼解析

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>JS獲取時間的方法及常用類</title>
 <style type="text/css">
 input{
 color:red;
 min-width: 250px;
 }
 /*設置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獲取時間的方法及常用類</h2>
 <h4>獲取當前日期+時間</h4>
 <input type="text" name="myDate">
 <hr>
 <h4>使用內置的Date函數獲取javascript時間</h4>
 當前年：<input type="text" name="getFullYear">
 <br>
 當前月：<input type="text" name="getMonth">  <font color="green">0-11,0代表一月份</font>
 <br>
 當前日：<input type="text" name="getDate">
 <br>
 當前星期：<input type="text" name="getDay">  <font color="green">0-6,0代表周日</font>
 <br>
 當前時間戳(精確毫秒)：<input type="text" name="getTime">  <font color="green">從1970.1.1開始的毫秒數</font>
 <br>
 當前小時：<input type="text" name="getHours">  <font color="green">0-23</font>
 <br>
 當前分鐘：<input type="text" name="getMinutes">  <font color="green">0-59</font>
 <br>
 當前秒數：<input type="text" name="getSeconds">  <font color="green">0-59</font>
 <br>
 當前毫秒數：<input type="text" name="getMilliseconds">  <font color="green">0-999</font>
 <br>
 當前日期：<input type="text" name="nowDate">
 <br>
 當前時間：<input type="text" name="nowTime">
 <br>
 當前日期+時間：<input type="text" name="nowDateAddNowTime">
 <br>
 <hr>
 <h4>日期時間腳本庫方法列表</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/>
 時(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>
 日期天數差:日期格式YYYY-MM-dd
 <br>
 起始日期:<input type="text" name="s_date" value="2018-08-01" /> 
 截止日期:<input type="text" name="e_date" value="2018-08-06" /> 
 日期差天數:<input type="text" name="diff_date">
 <p></p>
 日期計算:返回對象數據格式:"2018-08-06T06:29:49.000Z",可以調用對象的方法，比如getFullYear();
 <br>
 當前日期:<input type="text" name="date_now"><br/>
 2秒后的時間:<input type="text" name="second_now"><br/>
 2小時后的時間:<input type="text" name="hour_now"><br/>
 2天后的時間:<input type="text" name="day_now"><br/>
 2周后的時間:<input type="text" name="week_now"><br/>
 一季度后的時間:<input type="text" name="quarter_now"><br/>
 一個月后的時間:<input type="text" name="month_now"><br/>
 一年后的時間:<input type="text" name="year_now"><br/>
 <p></p>
 重載toString方法:"一"=====>"星期一"
 <br>
 <input type="text" name="reset_string">
 <P></P>
 日期合法性校驗(年月日):正確格式YYYY-MM-DD 或者 YYYY/MM/DD
 <br>
 輸入日期：
 <input type="text" name="checkDate" placeholder="YYYY-MM-DD或YYYY/MM/DD">  
 <input type="button" name="checkInputDate" value="檢驗" style="width:50px;">
 <p></p>
 日期合法性校驗(年月日 時分秒):正確格式YYYY-MM-DD HH:II:SS
 <br>
 輸入日期：
 <input type="text" name="checkDate1" placeholder="YYYY-MM-DD HH:II:SS">  
 <input type="button" name="checkInputDate1" value="檢驗1" style="width:50px;">
 <hr>
 日期分割成數組:
 <input type="text" name="splitDate"> <font color="green">取年份</font>
 <script type="text/javascript">
 $(function(){
 //獲取當前日期+時間
 var myDate = new Date();
 var t = myDate.toLocaleString();
 inputToValue('text','myDate',t);
 //============================================================
 //使用內置的Date函數獲取javascript時間
 var newDate = new Date();
 var getFullYear = newDate.getFullYear();//當前年
 inputToValue('text','getFullYear',getFullYear);
 var getMonth = newDate.getMonth();//當前月
 inputToValue('text','getMonth',getMonth);
 var getDate = newDate.getDate();//當前日
 inputToValue('text','getDate',getDate);
 var getDay = newDate.getDay();//當前星期
 inputToValue('text','getDay',getDay);
 var getTime = newDate.getTime();//當前時間戳(精確毫秒)
 inputToValue('text','getTime',getTime);
 var getHours = newDate.getHours();//當前小時
 inputToValue('text','getHours',getHours);
 var getMinutes = newDate.getMinutes();//當前分鐘
 inputToValue('text','getMinutes',getMinutes);
 var getSeconds = newDate.getSeconds();//當前秒數
 inputToValue('text','getSeconds',getSeconds);
 var getMilliseconds = newDate.getMilliseconds();//當前毫秒數
 inputToValue('text','getMilliseconds',getMilliseconds);
 var nowDate = newDate.toLocaleDateString();//當前日期
 inputToValue('text','nowDate',nowDate);
 var nowTime = newDate.toLocaleTimeString();//當前時間
 inputToValue('text','nowTime',nowTime);
 var nowDateAddNowTime = newDate.toLocaleString();//當前時間
 inputToValue('text','nowDateAddNowTime',nowDateAddNowTime);
 //============================================================
 //檢測是否為閏年，方法一
 Date.prototype.isLeapYears = function(){
 return (this.getYear() % 4 == 0) && (this.getYear() % 100 != 0 || this.getYear() % 400 == 0);
 }
 var dd1 = new Date();
 //檢測是否為閏年，方法二
 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
 //日期天數差:日期格式YYYY-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));
 //日期計算，返回一段日期時間后的對象
 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());//一個季度
 case 'm' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());//一個月
 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小時后
 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));//一個月后
 inputToValue('text','year_now',dd3.DateAdd('y',1));//一個年后
 //重載系統的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("一"));
 //日期合法性校驗，格式:YYYY-MM-DD或者YYYY/MM/DD,特殊情況如YYYY-MM/DD也能通過，后期處理
 function checkAndGetValue(DateStr)
 {
 var sDate=DateStr.replace(/(^\s+|\s+$)/g,''); //去兩邊空格;
 if(sDate=='')
 return false;
 //正則表達式
 patter = /^[\d]{4,4}[-/]{1}[\d]{1,2}[-/]{1}[\d]{1,2}$/;//不能加雙引號
 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("校驗通過：" + checkAndGetValue(getCheckDateValue));
 }else{
 $_a.val("");//不通過，清空輸入的值
 alert("校驗不通過");
 }
 });
 //日期合法性校驗 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("校驗通過");
 }else{
 $_a.val("");//不通過，清空輸入的值
 alert("校驗不通過");
 }
 });
 //把日期分割成數組
 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]);
 //通用函數
 function inputToValue(type,name,value){
 $("input[type="+ type +"][name="+ name +"]").val(value);
 }
 })
 </script>
</body>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

PS：這里再為大家推薦幾款比較實用的天數計算在線工具供大家使用：

在線日期/天數計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在線日期計算器/相差天數計算器：
http://tools.jb51.net/jisuanqi/datecalc

在線日期天數差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

在線天數計算器：
http://tools.jb51.net/jisuanqi/datejsq

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結》、《JavaScript+HTML5特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com