JavaScript-获取固定格式日期（2016-05-22）以及"连续"获取前一天、后一天的方法总结

最近接手的一个项目需要实现用JS获取日期，显示到界面上的功能，以及点击"连续点击"前一天后一天实现日期递增，递减来获取对应日期的数据的功能，需求如下图：

1.获取当日日期的方法：

/**   * 获取当前日期,显示在屏幕上  */function getNowFormatDate(addDayCount) {  var dayNames = new Array("周日","周一","周二","周三","周四","周五","周六")  var day = new Date();  day.setDate(day.getDate() + addDayCount);  var Year = 0;   var Month = 0;   var Day = 0;   var CurrentDate = "";   // 初始化时间   Year = day.getFullYear();  Month = day.getMonth() + 1;   Day = day.getDate();   CurrentDate += Year + "-";   if (Month >= 10 ) {    CurrentDate += Month + "-";   } else {    CurrentDate += "0" + Month + "-";   }  if (Day >= 10 ) {    CurrentDate += Day ;   } else {    CurrentDate += "0" + Day ;   }  CurrentDate += " " + dayNames[day.getDay()];  return CurrentDate; }

在当日日期的地方（HTML文件里）调用此方法，显示

<!-- 日期和收入 --><li class="cell"><a class="on"><!-- 给当日日期位置加了一个<span></span>标签,并绑定id --><span id="whq_date">2016-04-06   周三</span><em id="whq_todayIncome">￥:1873万</em></a></li>

在对应JS文件里调用此方法

    /**      * 1.将当前日期赋值给日期位置,为了显示日期用     */    document.getElementById('whq_date').innerHTML = getNowFormatDate();

效果如图所示

2.连续点击获取到对应日期的数据的方法

首先要发请求，传参数给后台，参数形式是日期纯字符串形式（比如20160522）而不能是之前显示的（2016-05-22）所以我只是把上面的连接符号去掉了而已

/**   * 获取当前日期字符串(无'-'),发请求用  */function getNowFormatDateStr(addDayCount) {  var day = new Date();  day.setDate(day.getDate() + addDayCount);  var Year = 0;   var Month = 0;   var Day = 0;   var CurrentDate = "";   // 初始化时间   Year = day.getFullYear();  Month = day.getMonth() + 1;   Day = day.getDate();   CurrentDate += Year;   if (Month >= 10 ) {    CurrentDate += Month;   } else {    CurrentDate += "0" + Month;   }  if (Day >= 10 ) {    CurrentDate += Day ;   } else {    CurrentDate += "0" + Day ;   }  return CurrentDate; }

因为要点击实现日期的加减，所以我用了比较笨的一个但是还比较实用的方法，先定义一个全局变量

/**   * 程序入口函数  */$(function() {  // 解决点击延迟问题  FastClick.attach(document.body);  document.addEventListener("deviceready", function() {    // TODO: 在此处添加页面入口逻辑    // 设置全局变量n记录点击前一天,后一天    var n = 0;  }

给前一天、后一天标签位置绑定id

<!-- 前一天 --><li id="whq_pDayIncomeLeft" class="cell"><a>前一天<em id="whq_pDayIncome">￥:1873万</em></a></li>

<!-- 后一天 --><li id="whq_nextDayIncomeRight" class="cell"><a>后一天<em id="whq_nextDayIncome">￥:1873万</em></a></li>

在对应的JS文件里点击时调用此方法

    /** 点击前一天 */    $('#whq_pDayIncomeLeft').click(function() {      n -= 1;      // 将当前日期赋值给日期位置      document.getElementById('whq_date').innerHTML = getNowFormatDate(n);      // 获取当前日期字符串(无'-'),发请求用      var pDayDateStr = getNowFormatDateStr(n);      /**       * 下面是向服务器发网络请求调用的一些方法       * 主要注意：将日期字符串作为参数发请求       */      /** 生产经营日期收入 */      whq_OPER_INCOME(pDayDateStr);      /** 生产经营收入与现金流 */      whq_OPER_INCOME_CASHFLOW(pDayDateStr);    });

    /** 点击后一天 */    $('#whq_nextDayIncomeRight').click(function() {      n += 1;      // 将当前日期赋值给日期位置      document.getElementById('whq_date').innerHTML = getNowFormatDate(n);      // 获取当前日期字符串(无'-'),发请求用      var nextDayDateStr = getNowFormatDateStr(n);      /**       * 下面是向服务器发网络请求调用的一些方法       * 主要注意：将日期字符串作为参数发请求       */      /** 生产经营日期收入 */      whq_OPER_INCOME(nextDayDateStr);      /** 生产经营收入与现金流 */      whq_OPER_INCOME_CASHFLOW(nextDayDateStr);    });

至此为止就实现了连续点击获取对应日期的数据，并显示对应的日期

温馨提示：

1.一开始我还有些顾虑，首先后台需要我传字符串类型的日期格式（"20160522"）这样的，那我JS方法获取到的是什么类型呢？

  // 打印一下看看到底是什么类型的数据格式  alert(typeof CurrentDate);  return CurrentDate;

实践才是检验真理的唯一标准：

2.那么问题又来了，既然是string类型，直接减一能行吗，不行的话可是得先转换成Number类型，然后再转换成string类型才能做减法（加法），因为在iOS里面字符串类型是不能直接和数字做运算的，因为不懂所以冒险尝试了一下，完全没做类型转换，结果如图

感觉JS如此强大，程序员有时候就该偷偷懒的

3.还有个担心，就是现在点击前一天都是-1的获取日期，在iOS里获取昨天的日期是要sinceNow：-24*60*60的

JS里直接-1是巧合，还是靠谱

如果说-1可以实现日期递减，那么当从现在（20160522）减（22）次以后，日期显示（20160500）还是（20160430）呢

如果递减到月初可以显示（20160430）那么（20160430）再减（30）呢，是显示（20160330）还是（20160331）呢，3月份是有31天的呢

带着这些疑问又做了一些测试

事实证明，JS确实非常之强大，完全没有问题