美高梅开户-美高梅官方网站开户

您的位置:美高梅开户 > 美高梅官方网站开户 > HTML5实现的日期比较功能示例,JS实现简单获取最

HTML5实现的日期比较功能示例,JS实现简单获取最

发布时间:2019-08-09 19:20编辑:美高梅官方网站开户浏览(199)

    本文实例讲述了JavaScript HTML5实现的日期比较功能。分享给大家供大家参考,具体如下:

    本文实例讲述了JS实现简单获取最近7天和最近3天日期的方法。分享给大家供大家参考,具体如下:

    这里要在前面的文章《JavaScript实现设置默认日期范围为最近40天的方法》基础之上,进一步校验开始日期、结束日期是否合理。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>www.jb51.net JS获取最近三天和最近3天日期</title>
    </head>
    <body>
    <script>
    //获取最近7天日期
    console.log(getDay(0));//当天日期
    console.log(getDay(-7));//7天前日期
    //获取最近3天日期
    console.log(getDay(0));//当天日期
    console.log(getDay(-3));//3天前日期
    function getDay(day){
        var today = new Date();
        var targetday_milliseconds=today.getTime()   1000*60*60*24*day;
        today.setTime(targetday_milliseconds); //注意,这行是关键代码
        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = doHandleMonth(tMonth   1);
        tDate = doHandleMonth(tDate);
        return tYear "-" tMonth "-" tDate;
    }
    function doHandleMonth(month){
        var m = month;
        if(month.toString().length == 1){
         m = "0"   month;
        }
        return m;
    }
    </script>
    </body>
    </html>
    

    比如:开始日期要小于等于结束日期,还有实现只能查询最近40天内的数据(设定为:结束日期减去开始日期要小于等于41,设为40也可以,关键看需求),如果要查询超过40天的数据,会直接报错。

    美高梅官方网站开户 ,运行结果:

    在报错时,不会显示具体的错误,比如:结束日期大于当天日期,或者开始日期大于当天日期。

    美高梅官方网站开户 1

    代码:

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

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta http-equiv="content-type" content="charset=utf8"></meta>
      <script type="text/javascript">
        //计算日期相差的天数
        function datediff(startdate,enddate)
        {
          //alert(typeof(startdate));
          //拆分字符串
          var d1 = startdate.split('-');
          var d2 = enddate.split('-');
          //重新定义2个日期
          var date1 = new Date(d1[0],d1[1],d1[2]);
          var date2 = new Date(d2[0],d2[1],d2[2]);
          //取得子1970-01-01到指定日期的毫秒数
          var dt1 = date1.getTime();
          var dt2 = date2.getTime();
          console.log(d1[0],d1[1],d1[2]);
          console.log(d2[0],d2[1],d2[2]);
          console.log(dt1,dt2,(dt2-dt1) / (24*60*60*1000));
          return (dt2-dt1) / (24*60*60*1000)
        }
        //响应查询按钮
        function query()
        {
          //先把输出内容情况
          var yy = document.getElementById("sp");
          yy.innerHTML = "";
          var date1 = document.getElementById("date1").value;
          var date2 = document.getElementById("date2").value;
          //判断开始日期是否大于结束日期
          if (date1 > date2)
          {
            alert("开始日期大于结束日期!请重新选择查询日期");
            return false;
          }
          //判断是否为最近40天的数据
          var today = dateToString(new Date());
          if (datediff(date1,today)<0 || datediff(date1,today)> 41 || datediff(date2,today)< 0 || datediff(date2,today)> 41)
          {
            alert("只能查询最近40天范围的数据!请重新选择查询日期");
            return false;
          }
          //把选择的日期输出
          var xx = document.getElementsByName("day");
          var s="";
          for (var i=0;i<xx.length ;i   )
          {
            if(xx[i].tagName == 'TD')
              s= s   xx[i].innerText;
              //alert(xx[i].innerText);
            else
            {
              if(xx[i].tagName == 'INPUT')
                s  = xx[i].value;
            }
            if( i % 2 == 1)
              s =";";
          }
          yy.innerHTML = s;
        }
        //实现把日期类型数据转化为标准的字符串格式
        function dateToString(d)
        {
          var y= d.getFullYear();
          var m= d.getMonth()   1;
          var d=d.getDate();
          //把日期2017-1-6 格式化为标准的 2017-01-06
          //判断数字的长度是否是1,如果是1那么前面加上字符0
          if(m.toString().length == 1) m= "0"   m;
          if(d.toString().length == 1) d= "0"   d;
          return y "-" m "-" d;
        }
        //在页面加载的时候,初始化开始(40天前的日期)、结束日期(当天),实现默认查询最近40天的数据
        function onload()
        {
          //获取今天的日期,但是这个数据的格式不标准
          //也就是把 Fri Jan 06 2017 10:43:07 GMT 0800 转化成 2017-01-06 这种格式
          var d = new Date();
          var endDate = dateToString(d);
          //返回日期的原始值,也就是自xxx年xx月xx日 到今天的日期相差的毫秒数
          d = d.valueOf();
          d = d - 40*24*60*60*1000;
          d = new Date(d);
          var startDate = dateToString(d);
          //把日期值输出到chrome的日志中,方便调试
          console.log(d);
          console.log(startDate);
          console.log(endDate);
          var date1 = document.getElementById("date1");
          var date2 = document.getElementById("date2");
          date1.value = startDate;
          date2.value = endDate;
        }
      </script>
    </head>
    <body onload="onload()">
      <table>
        <tr>
          <td name="day">开始日期: <input type="date" name="day" id="date1" /></td>
        </tr>
        <tr>
          <td name="day">结束日期:<input type="date" name="day" id="date2"/></td>
          <td><input type="button" value="查 询" onclick="query()" /></td>
        </tr>
      </table>
      <hr>
      <p><p>
    </body>
    </html>
    

    在线日期/天数计算器:

    运行效果:

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

    美高梅官方网站开户 2

    在线日期天数差计算器:

    本文由美高梅开户发布于美高梅官方网站开户,转载请注明出处:HTML5实现的日期比较功能示例,JS实现简单获取最

    关键词: 美高梅开户

上一篇:php创设属于本身的MVC框架,php不难实现MVC

下一篇:没有了