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 相关文章推荐
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
jquery的map与get方法详解
Nov 04 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
解决浏览器会自动填充密码的问题
Apr 28 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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把小数转成整数3种方法
2014/06/30 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
浅谈python迭代器
2017/11/08 Python
python实现list由于numpy array的转换
2018/04/04 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
解决Django连接db遇到的问题
2019/08/29 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
在keras里实现自定义上采样层
2020/06/28 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
本科生详细的自我评价
2013/09/19 职场文书
车间机修工岗位职责
2014/02/28 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
领导班子整改方案
2014/10/25 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
Django Paginator分页器的使用示例
2021/06/23 Python
Java中的继承、多态以及封装
2022/04/11 Java/Android