首頁 > web前端 > js教程 > JavaScript比較同一天的時間大小

JavaScript比較同一天的時間大小

小云云
發布: 2018-02-11 09:41:47
原創
1763 人瀏覽過

在專案開發的過程中,有時候會遇到同一天內的時間大小比較,一般來說選擇時間是透過插件實現的,但不排除客戶要求手動輸入的情況。那麼,在應客戶要求手動輸入時間,並且需要進行時間大小比較的時候該如何實現呢?以下簡單介紹我實現的方法步驟:

1.首先,取得使用者輸入的內容;

2.驗證時間格式是否正確;

##3.比較兩個時間的大小(整理了三種比較時間的方法,詳情請查看以下程式碼);

4.傳回結果。

以下為範例程式碼,僅做參考:

1.取得使用者輸入的兩個時間,並將使用者輸入的冒號全部替換為半角冒號,方便後續操作;

var bagin = $('.input_three').val().replace(/:/g,':');//将全角冒号替换为半角冒号,替换的目的是为了通过半角冒号分割字符
      var end = $('.input_four').val().replace(/:/g,':');
//     替换字符串中的某个字符:.replace(':',':'):只替换字符串中的第一个全角冒号;.replace(/:/g,':'):替换字符串中的所有的全角冒号
//将时间以冒号分割:以下比较时间大小的方法中会用到
var bagin_ = bagin.split(':');
var end_ = end.split(':');
登入後複製
2.驗證時間格式是否正確:

//      正则验证时间格式,正确的时间范围(通过返回时间戳格式,否则返回null)
//     [0-9]在范围内取其一;?是取之前字符的0个或者1个;也可以解释为非贪婪模式;|或者
      var bagin_r = bagin.match(/^([0-1]?[0-9]|2[0-3])(:|:)([0-5][0-9])(:|:)([0-5][0-9])$/);
      var end_r = end.match(/^([0-1]?[0-9]|2[0-3])(:|:)([0-5][0-9])(:|:)([0-5][0-9])$/);
if(bagin_r==null){
  alert("请输入正确的营业时间,00:00:00-23:59:59");
  return false;
}

if(end_r==null){
  alert("请输入正确的截止时间,00:00:00-23:59:59");
  return false;
}
登入後複製
3.比較時間大小:

方法一: 透過時間戳記比較時間大小(必須轉換為時間戳格式才能夠進行大小比較)

if(bagin_r[1]>end_r[1]||bagin_r[1]==end_r[1]&&bagin_r[3]>end_r[3]||bagin_r[1]==end_r[1]&&bagin_r[3]==end_r[3]&&bagin_r[5]>=end_r[5]){
//         alert("开始时间不能大于等于结束时间");
//         return false;
//       }
登入後複製
方法二:分別取得輸入時間的時分秒進行判斷

if(bagin_[0]>end_[0]||bagin_[0]==end_[0]&&bagin_[1]>end_[1]||bagin_[0]==end_[0]&&bagin_[1]==end_[1]&&bagin_[2]>=end_[2]){
//       alert("开始时间不能大于等于结束时间");
//         return false;
//     }
登入後複製
方法三:透過計算總秒數來比較時間大小

var bagin_time = bagin_[0]*3600 + bagin_[1]*60 + bagin_[2];
      var end_time = end_[0]*3600 + end_[1]*60 + end_[2];
      if(bagin_time >= end_time){
        alert("开始时间不能大于等于结束时间");
          return false;
      }
//       
        else{
         alert("提交成功");
        }
登入後複製
相關推薦:

javascript時間戳轉換成日期格式的用法實例詳解

#javascript時間處理方法總結(建議)

javascript時間物件教學

以上是JavaScript比較同一天的時間大小的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板