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 相关文章推荐
基于jquery的15款幻灯片插件
Apr 10 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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
smtp邮件发送一例
2006/10/09 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
phpfpm的作用和用法
2019/10/10 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
jQuery 渐变下拉菜单
2009/12/15 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
javascript实现下雨效果
2017/03/27 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
基于Three.js实现360度全景图片
2018/12/30 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
如何使用python写截屏小工具
2020/09/29 Python
python 简单的调用有道翻译
2020/11/25 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
高级工程师英文求职信
2014/03/19 职场文书
离婚起诉书范本
2015/05/18 职场文书
2015最新民情日记范文
2015/06/26 职场文书
小组组名及励志口号
2015/12/24 职场文书