首页
所有分类
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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery手风琴的简单制作
May 12 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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
J2EE面试题(19) 推荐信(292) Delphi面试题(13) 自我评价(886) Ruby面试题(15) 自我鉴定(671) 求职信(1029) 自荐信(981) SOA面试题(9) 岗位职责(1324)
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
php防止sql注入代码实例
2013/12/18 PHP
php递归实现无限分类的方法
2015/07/28 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
vue实现某元素吸顶或固定位置显示（监听滚动事件）
2017/12/13 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
[01:10]为家乡而战！完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python构建深度神经网络（DNN）
2018/03/10 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
个人自荐书
2013/12/20 职场文书
2015年见习期工作总结
2014/12/12 职场文书
《角的度量》教学反思
2016/02/18 职场文书
合作意向书范本
2019/04/17 职场文书
Mysql基础之常见函数
2021/04/22 MySQL