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 相关文章推荐
JS实现打开本地文件或文件夹
Mar 09 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
Vue如何实现组件间通信
May 15 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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/07/29 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
如何在PHP中使用数组
2020/06/09 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python文件和文件夹复制函数
2020/02/07 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
导游的职业规划书范文
2013/12/27 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js