JavaScript를 통해 같은 날 시간 비교

프로젝트 개발 중에 같은 날의 시간 비교를 자주 접하게 되는데, 아래에서는 같은 날의 시간 크기를 비교할 수 있는 JavaScript 예제 코드를 가져왔습니다. 필요하신 분들은 참고하시면 됩니다

프로젝트 개발 과정에서 가끔 일반적으로 시간 선택은 플러그인을 통해 이루어지지만 고객이 수동 입력을 요구하는 상황을 배제할 수는 없습니다.

그럼 고객의 요청에 따라 수동으로 시간을 입력하고 시간 크기를 비교해야 하는 경우 어떻게 구현해야 할까요? 다음은 제가 구현한 방법의 단계를 간략하게 소개합니다.

1. 먼저 사용자가 입력한 내용을 확인합니다.

2. 두 가지의 크기를 비교합니다. times(시간을 비교하는 세 가지 방법을 구성했습니다. 자세한 내용은 다음 코드를 참조하세요.)

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. 시간 크기 비교:

방법 1: 타임스탬프를 통해 시간 크기 비교(크기 비교를 수행하려면 타임스탬프 형식으로 변환해야 함)

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;
//       }

방법 2: 시간, 분 및 판단을 위한 입력 시간의 초

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;
//     }

방법 3: 총 초 수를 계산하여 시간을 비교합니다

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("提交成功");
        }

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

Vue에서 v-for를 사용하여 src 속성에 값을 할당하는 방법 구현(상세 튜토리얼)

vue에서 v-for를 사용하여 로컬 로드 방법 구현 정적 이미지(자세한 튜토리얼)

vue에서 v-for를 사용할 때 빨간색 및 경고 문제를 해결하는 방법(자세한 튜토리얼)

위 내용은 JavaScript를 통해 같은 날 시간 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!