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/html光标定位的实现代码
Sep 23 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
node中koa中间件机制详解
Aug 22 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
vant实现购物车功能
Jun 29 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
python实现简单爬虫功能的示例
2016/10/24 Python
深入理解python中的select模块
2017/04/23 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
浅谈Python中的继承
2020/06/19 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
亿企通软件测试面试题
2012/04/10 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
MySQL触发器的使用
2021/05/24 MySQL
纯html+css实现打字效果
2021/08/02 HTML / CSS