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 相关文章推荐
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
Oct 22 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 array_merge下进行数组合并的代码
2008/07/22 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP实现微信提现功能
2018/09/30 PHP
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
Python内置函数reversed()用法分析
2018/03/20 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
什么是继承
2013/12/07 面试题
单位员工收入证明样本
2014/10/09 职场文书
2014年秘书工作总结
2014/11/25 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
力克胡哲观后感
2015/06/10 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript