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确实非常之强大，完全没有问题