首页
所有分类
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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 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
远程桌面(2) 相对路径 (1) REST(1) Mint UI(1) 相对路径(1) 慢日志(1) 面向对象(3) mt-swipe(1) exists(2) cmd(1)
You might like
oracle资料库函式库
2006/10/09 PHP
PHP中for循环语句的几种变型
2007/03/16 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
DOM 事件的深入浅出（二）
2016/12/05 Javascript
Bootstrap源码解读导航（6）
2016/12/23 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
vue组件间通信解析
2017/03/01 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python控制Firefox方法总结
2019/06/03 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
可爱的童装和鞋子：Fabkids
2019/08/16 全球购物
阿迪达斯新加坡官方网站：adidas新加坡
2019/12/06 全球购物
班级聚会策划书
2014/01/16 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
redis cluster支持pipeline的实现思路
2021/06/23 Redis
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis