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 相关文章推荐
生成二维码方法汇总
Dec 26 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
react路由配置方式详解
Aug 07 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
vue请求数据的三种方式
Mar 04 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 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获取数组中键值最大数组项的索引值
2015/03/17 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
移动端js图片查看器
2016/11/17 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
浅谈python锁与死锁问题
2020/08/14 Python
外国语学院毕业生自荐信
2013/10/28 职场文书
师德学习感言
2014/01/31 职场文书
初中教师业务学习材料
2014/05/12 职场文书
硕士生找工作求职信
2014/07/05 职场文书
任长霞观后感
2015/06/16 职场文书
童年读书笔记
2015/06/26 职场文书