首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

JS/jQuery实现获取时间的方法及常用类完整示例

Posted in jQuery onMarch 07, 2019

本文实例讲述了JS jQuery实现获取时间的方法及常用类。分享给大家供大家参考，具体如下：

效果图

JS/jQuery实现获取时间的方法及常用类完整示例

源码解析

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS获取时间的方法及常用类</title>
  <style type="text/css">
    input{
      color:red;
      min-width: 250px;
    }
    /*设置placeholder的颜色*/
    ::-webkit-input-placeholder { /* WebKit browsers */
      color:  #999;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:  #999;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:  #999;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
      color:  #999;
    }
    p{
      width:100%;height:0px;border-top:1px orange dashed;
    }
  </style>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
  <h2>JS获取时间的方法及常用类</h2>
  <h4>获取当前日期+时间</h4>
  <input type="text" name="myDate">
  <hr>
  <h4>使用内置的Date函数获取javascript时间</h4>
  当前年：<input type="text" name="getFullYear">
  <br>
  当前月：<input type="text" name="getMonth">  <font color="green">0-11,0代表一月份</font>
  <br>
  当前日：<input type="text" name="getDate">
  <br>
  当前星期：<input type="text" name="getDay">  <font color="green">0-6,0代表周日</font>
  <br>
  当前时间戳(精确毫秒)：<input type="text" name="getTime">  <font color="green">从1970.1.1开始的毫秒数</font>
  <br>
  当前小时：<input type="text" name="getHours">  <font color="green">0-23</font>
  <br>
  当前分钟：<input type="text" name="getMinutes">  <font color="green">0-59</font>
  <br>
  当前秒数：<input type="text" name="getSeconds">  <font color="green">0-59</font>
  <br>
  当前毫秒数：<input type="text" name="getMilliseconds">  <font color="green">0-999</font>
  <br>
  当前日期：<input type="text" name="nowDate">
  <br>
  当前时间：<input type="text" name="nowTime">
  <br>
  当前日期+时间：<input type="text" name="nowDateAddNowTime">
  <br>
  <hr>
  <h4>日期时间脚本库方法列表</h4>
  判断闰年：
  <input type="radio" name="isLeapYears" value="1">闰年
  <input type="radio" name="isLeapYears" value="0">非闰年
  <p></p>
  日期格式化：
  <br/>
  年份(YYYY/yyyy):<input type="text" name="formatYear1">  (YY/yy)：<input type="text" name="formatYear2">
  <br/>
  月份(MM):<input type="text" name="formatMonth1">  (M):<input type="text" name="formatMonth2">
  <br/>
  星期(W/w):<input type="text" name="formatWeek">
  <br/>
  日(DD/dd):<input type="text" name="formatDay1">  (D/d)：<input type="text" name="formatDay2">
  <br/>
  时(HH/hh):<input type="text" name="formatHour1">  (H/h)：<input type="text" name="formatHour2">
  <br/>
  分(mm):<input type="text" name="formatMinute1">  (m)：<input type="text" name="formatMinute2">
  <br/>
  秒(SS/S):<input type="text" name="formatSecond1">  (ss/s)：<input type="text" name="formatSecond2">
  <br/>
  <p></p>
  日期天数差:日期格式YYYY-MM-dd
  <br>
  起始日期:<input type="text" name="s_date" value="2018-08-01" /> 
  截止日期:<input type="text" name="e_date" value="2018-08-06" /> 
  日期差天数:<input type="text" name="diff_date">
  <p></p>
  日期计算:返回对象数据格式:"2018-08-06T06:29:49.000Z",可以调用对象的方法，比如getFullYear();
  <br>
  当前日期:<input type="text" name="date_now"><br/>
  2秒后的时间:<input type="text" name="second_now"><br/>
  2小时后的时间:<input type="text" name="hour_now"><br/>
  2天后的时间:<input type="text" name="day_now"><br/>
  2周后的时间:<input type="text" name="week_now"><br/>
  一季度后的时间:<input type="text" name="quarter_now"><br/>
  一个月后的时间:<input type="text" name="month_now"><br/>
  一年后的时间:<input type="text" name="year_now"><br/>
  <p></p>
  重载toString方法:"一"=====>"星期一"
  <br>
  <input type="text" name="reset_string">
  <P></P>
  日期合法性校验(年月日):正确格式YYYY-MM-DD 或者 YYYY/MM/DD
  <br>
  输入日期：
  <input type="text" name="checkDate" placeholder="YYYY-MM-DD或YYYY/MM/DD">  
  <input type="button" name="checkInputDate" value="检验" style="width:50px;">
  <p></p>
  日期合法性校验(年月日 时分秒):正确格式YYYY-MM-DD HH:II:SS
  <br>
  输入日期：
  <input type="text" name="checkDate1" placeholder="YYYY-MM-DD HH:II:SS">  
  <input type="button" name="checkInputDate1" value="检验1" style="width:50px;">
  <hr>
  日期分割成数组:
  <input type="text" name="splitDate"> <font color="green">取年份</font>
  <script type="text/javascript">
    $(function(){
      //获取当前日期+时间
      var myDate = new Date();
      var t = myDate.toLocaleString();
      inputToValue('text','myDate',t);
      //============================================================
      //使用内置的Date函数获取javascript时间
      var newDate = new Date();
      var getFullYear = newDate.getFullYear();//当前年
      inputToValue('text','getFullYear',getFullYear);
      var getMonth = newDate.getMonth();//当前月
      inputToValue('text','getMonth',getMonth);
      var getDate = newDate.getDate();//当前日
      inputToValue('text','getDate',getDate);
      var getDay = newDate.getDay();//当前星期
      inputToValue('text','getDay',getDay);
      var getTime = newDate.getTime();//当前时间戳(精确毫秒)
      inputToValue('text','getTime',getTime);
      var getHours = newDate.getHours();//当前小时
      inputToValue('text','getHours',getHours);
      var getMinutes = newDate.getMinutes();//当前分钟
      inputToValue('text','getMinutes',getMinutes);
      var getSeconds = newDate.getSeconds();//当前秒数
      inputToValue('text','getSeconds',getSeconds);
      var getMilliseconds = newDate.getMilliseconds();//当前毫秒数
      inputToValue('text','getMilliseconds',getMilliseconds);
      var nowDate = newDate.toLocaleDateString();//当前日期
      inputToValue('text','nowDate',nowDate);
      var nowTime = newDate.toLocaleTimeString();//当前时间
      inputToValue('text','nowTime',nowTime);
      var nowDateAddNowTime = newDate.toLocaleString();//当前时间
      inputToValue('text','nowDateAddNowTime',nowDateAddNowTime);
      //============================================================
      //检测是否为闰年，方法一
      Date.prototype.isLeapYears = function(){
        return (this.getYear() % 4 == 0) && (this.getYear() % 100 != 0 || this.getYear() % 400 == 0);
      }
      var dd1 = new Date();
      //检测是否为闰年，方法二
      function checkYear(year){
        return (year % 4 == 0 && (year % 100 !=0 || year % 400 !=0));
      }
      if(dd1.isLeapYears()){//checkYear(2018)
        $("input[type='radio'][name='isLeapYears'][value='1']").prop("checked",true);
      }else{
        $("input[type='radio'][name='isLeapYears'][value='0']").prop("checked",true);
      }
      //日期格式化
      Date.prototype.Format = function(formatStr){
        var str = formatStr;
        var Week = ['日','一','二','三','四','五','六'];
        str=str.replace(/yyyy|YYYY/,this.getFullYear());
        str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100));
        str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():'0' + this.getMonth());
        str=str.replace(/M/g,this.getMonth());
        str=str.replace(/w|W/g,Week[this.getDay()]);
        str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());
        str=str.replace(/d|D/g,this.getDate());
        str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());
        str=str.replace(/h|H/g,this.getHours());
        str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());
        str=str.replace(/m/g,this.getMinutes());
        str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());
        str=str.replace(/s|S/g,this.getSeconds());
        return str;
      }
      var dd2 = new Date();
      inputToValue('text','formatYear1',dd2.Format('YYYY'));//YYYY/yyyy
      inputToValue('text','formatYear2',dd2.Format('YY'));//YY/yy
      inputToValue('text','formatMonth1',dd2.Format('MM'));//MM
      inputToValue('text','formatMonth2',dd2.Format('M'));//M
      inputToValue('text','formatWeek',dd2.Format('W'));//W/w
      inputToValue('text','formatDay1',dd2.Format('DD'));//DD/dd
      inputToValue('text','formatDay2',dd2.Format('d'));//dd/d
      inputToValue('text','formatHour1',dd2.Format('HH'));//HH/hh
      inputToValue('text','formatHour2',dd2.Format('h'));//H/h
      inputToValue('text','formatMinute1',dd2.Format('mm'));//mm
      inputToValue('text','formatMinute2',dd2.Format('m'));//m
      inputToValue('text','formatSecond1',dd2.Format('SS'));//SS/ss
      inputToValue('text','formatSecond2',dd2.Format('s'));//S/s
      //日期天数差:日期格式YYYY-MM-dd
      var s_date = $("input[type='text'][name='s_date']").val();
      var e_date = $("input[type='text'][name='e_date']").val();
      function daysBetween(DateOne,DateTwo)
      {
        var OneMonth = DateOne.substring(5,DateOne.lastIndexOf ('-'));
        var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ('-')+1);
        var OneYear = DateOne.substring(0,DateOne.indexOf ('-'));
        var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ('-'));
        var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ('-')+1);
        var TwoYear = DateTwo.substring(0,DateTwo.indexOf ('-'));
        var cha=((Date.parse(OneMonth+'/'+OneDay+'/'+OneYear)- Date.parse(TwoMonth+'/'+TwoDay+'/'+TwoYear))/86400000);
        return Math.abs(cha);
      }
      inputToValue('text','diff_date',daysBetween(s_date,e_date));
      //日期计算，返回一段日期时间后的对象
      Date.prototype.DateAdd = function(strInterval, Number) {
        var dtTmp = this;
        switch (strInterval) {
          case 's' :return new Date(Date.parse(dtTmp) + (1000 * Number));
          case 'n' :return new Date(Date.parse(dtTmp) + (60000 * Number));
          case 'h' :return new Date(Date.parse(dtTmp) + (3600000 * Number));
          case 'd' :return new Date(Date.parse(dtTmp) + (86400000 * Number));
          case 'w' :return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));
          case 'q' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number*3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());//一个季度
          case 'm' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());//一个月
          case 'y' :return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
        }
      }
      var dd3 = new Date();
      inputToValue('text','date_now',dd3.DateAdd('s',0));
      inputToValue('text','second_now',dd3.DateAdd('s',2));//2秒后
      inputToValue('text','hour_now',dd3.DateAdd('h',2));//2小时后
      inputToValue('text','day_now',dd3.DateAdd('d',2));//2天后
      inputToValue('text','week_now',dd3.DateAdd('w',2));//2周后
      inputToValue('text','quarter_now',dd3.DateAdd('q',1));//一季度后
      inputToValue('text','month_now',dd3.DateAdd('m',1));//一个月后
      inputToValue('text','year_now',dd3.DateAdd('y',1));//一个年后
      //重载系统的toString方法
      Date.prototype.toString = function(showWeek)
      {
        var myDate= this;
        var str = myDate.toLocaleDateString();//保留年/月/日
        if (showWeek)
        {
          var Week = ['日','一','二','三','四','五','六'];
          str += ' 星期' + Week[myDate.getDay()];
        }
        return str;
      }
      var dd4 = new Date();
      inputToValue('text','reset_string',dd4.toString("一"));
      //日期合法性校验，格式:YYYY-MM-DD或者YYYY/MM/DD,特殊情况如YYYY-MM/DD也能通过，后期处理
      function checkAndGetValue(DateStr)
      {
        var sDate=DateStr.replace(/(^\s+|\s+$)/g,''); //去两边空格;
        if(sDate=='')
          return false;
        //正则表达式
        patter = /^[\d]{4,4}[-/]{1}[\d]{1,2}[-/]{1}[\d]{1,2}$/;//不能加双引号
        if(patter.test(sDate)){
          var t = new Date(sDate.replace(/\-/g,'/'));
          var ar = sDate.split(/[-/:]/);
          if(ar[0] != t.getFullYear() || ar[1] != t.getMonth()+1 || ar[2] != t.getDate()){
            return false;
          }else{
            return ar.join("-");
          }
        }else{
          return false;
        }
      }
      $("input[type='button'][name='checkInputDate']").click(function(){
        $_a = $("input[type='text'][name='checkDate']");
        var getCheckDateValue = $_a.val();
        if(checkAndGetValue(getCheckDateValue)){
          alert("校验通过：" + checkAndGetValue(getCheckDateValue));
        }else{
          $_a.val("");//不通过，清空输入的值
          alert("校验不通过");
        }
      });
      //日期合法性校验 YYYY-MM-DD HH:II:SS
      function CheckDateTime(DateStr)
      {
        var reg = /^(\d+)-(\d{1,2})-(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
        var r = DateStr.match(reg);
        if(r==null) return false;
        r[2] = r[2]-1;
        var d = new Date(r[1],r[2],r[3],r[4],r[5],r[6]);
        if(d.getFullYear() != r[1]) return false;
        if(d.getMonth() != r[2]) return false;
        if(d.getDate() != r[3]) return false;
        if(d.getHours() != r[4]) return false;
        if(d.getMinutes() != r[5]) return false;
        if(d.getSeconds() != r[6]) return false;
        return true;
      }
      $("input[type='button'][name='checkInputDate1']").click(function(){
        $_a = $("input[type='text'][name='checkDate1']");
        var getCheckDateValue1 = $_a.val();
        if(CheckDateTime(getCheckDateValue1)){
          alert("校验通过");
        }else{
          $_a.val("");//不通过，清空输入的值
          alert("校验不通过");
        }
      });
      //把日期分割成数组
      Date.prototype.toArray = function()
      {
        var myDate = this;
        var myArray = Array();
        myArray[0] = myDate.getFullYear();
        myArray[1] = myDate.getMonth() + 1;
        myArray[2] = myDate.getDate();
        myArray[3] = myDate.getHours();
        myArray[4] = myDate.getMinutes();
        myArray[5] = myDate.getSeconds();
        return myArray;
      }
      var dd5 = new Date();
      $("input[name='splitDate']").val(dd5.toArray()[0]);
      //通用函数
      function inputToValue(type,name,value){
        $("input[type="+ type +"][name="+ name +"]").val(value);
      }
    })
  </script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

PS：这里再为大家推荐几款比较实用的天数计算在线工具供大家使用：

在线日期/天数计算器：
http://tools.3water.com/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器：
http://tools.3water.com/jisuanqi/datecalc

在线日期天数差计算器：
http://tools.3water.com/jisuanqi/onlinedatejsq

在线天数计算器：
http://tools.3water.com/jisuanqi/datejsq

希望本文所述对大家JavaScript程序设计有所帮助。

JS/jQuery实现获取时间的方法及常用类完整示例

- Author -

JasonHome

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
[jQuery] 事件和动画详解
Mar 05 #jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 #jQuery
jQuery.parseJSON()函数详解
Feb 28 #jQuery
jQuery each和js forEach用法比较
Feb 27 #jQuery
jQuery中each和js中forEach的区别分析
Feb 27 #jQuery
ip2region(1) 反射(1) scrapy(1) localStorage(1) BottomSheetDialog(1) virtualenv(1) 注解(1) Postman(1) dataBinding(1) DeOldify(1)
You might like
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
php实现图片添加水印功能
2014/02/13 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
硬盘浏览程序，保存成网页格式便可使用
2006/12/03 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
浅谈js中的闭包
2015/03/16 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python中print和return的作用及区别解析
2019/05/05 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
巧克力领导品牌瑞士莲美国官网：Lindt Chocolate美国
2016/08/25 全球购物
加拿大百叶窗和窗帘定制网站：Blinds
2017/01/30 全球购物
医院2014国庆节活动策划方案
2014/09/21 职场文书
三方股东合作协议书
2014/10/28 职场文书
教师岗位职责范本
2015/04/02 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书