最近接手的一个项目需要实现用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确实非常之强大,完全没有问题