欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-14 17:16:44
本文实例讲述了js jquery实现获取时间的方法及常用类。分享给大家供大家参考,具体如下: 效果图 源码解析 ...

本文实例讲述了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.jb51.net/code/htmljsrun测试上述代码运行效果。

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

在线日期/天数计算器:

在线日期计算器/相差天数计算器:

在线日期天数差计算器:

在线天数计算器:

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript时间与日期操作技巧总结》、《javascript+html5特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结

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