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实现ASP分页函数 HTML分页函数
Sep 22 Javascript
javascript中的location用法简单介绍
Mar 07 Javascript
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
前端面试知识点目录一览
Apr 15 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
php xml-rpc远程调用
2008/12/19 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
python使用socket连接远程服务器的方法
2015/04/29 Python
Python通过select实现异步IO的方法
2015/06/04 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python基本语法经典教程
2016/03/11 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
python 如何调用 dubbo 接口
2020/09/24 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
高一自我鉴定
2013/12/17 职场文书
个人近期表现材料
2014/02/11 职场文书
五一促销活动总结
2014/07/01 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
运动会报道稿大全
2015/07/23 职场文书
关于MySQL中explain工具的使用
2023/05/08 MySQL