JavaScript比较同一天的时间大小实例代码


Posted in Javascript onFebruary 09, 2018

在项目开发的过程中,有时候会遇到同一天内的时间大小比较,一般来说选择时间是通过插件实现的,但并不排除客户要求手动输入的情况。

那么,在应客户要求手动输入时间,并且需要进行时间大小比较的时候该如何实现呢?以下简单介绍我实现的方法步骤:

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 相关文章推荐
Prototype ObjectRange对象学习
Jul 19 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 #Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 #Javascript
vue二级路由设置方法
Feb 09 #Javascript
从零开始搭建一个react项目开发
Feb 09 #Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 #Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 #Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 #Javascript
You might like
一篇不错的PHP基础学习笔记
2007/03/18 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
深入理解python多进程编程
2016/06/12 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
js实现弹框效果
2021/03/24 Javascript
土木工程毕业生自荐信
2013/09/21 职场文书
王老吉广告词
2014/03/20 职场文书
2014年环保局工作总结
2014/12/11 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
员工手册编写范本
2015/05/14 职场文书
课题研究阶段性总结
2015/08/13 职场文书
企业法人任命书
2015/09/21 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS