Axure教程：用中继器和日期函数实现万年历

　　对于万年历的概念，大家已经非常熟悉了，尤其临近节假日的时候，我们会习惯去查看日历上的放假安排，但是经常觉得很坑爹啊有木有，不过这是题外话了。今天这个案例就和万年历有关，教大家使用“中继器”和“日期函数”来实现一个万年历的原型，不过这原型可不是死的哦，是可以真真正正显示万年日期的万年历。
　　原型预览：
　　原型说明：万年历原型在初始化的时候可以自动显示当前日期，并锁定当天（Today），通过“上一年”“上一月”“下一月”“下一年”操作，可显示对应年份及月份的日历，“返回今天”可返回当前月份日历及锁定当天（Today）。
　　学习重点
　　通过本案例，我们主要来练习中继器和日期函数的使用，中继器用于显示日历的天，日期函数则用于处理日历的显示逻辑。其中使用到的日期函数将包括：Now获取当前日期、getDate（）获取天、getDay（）获取一周中的第几天、addDays（）增加减少天、addMonths（）增加减少月、addYears（）增加减少年。
　　原理说明
　　首先我用一个76的矩阵（中继器）来显示日期，至于为什么是76而不是75，大家仔细观察一下日历就可以发现了，75有时候是不能将一整月的日期显示全的。接下来我就是要把日期显示到对应的矩阵单元上，下面我用一个图来表示：
　　上图是一个日历的大概的样子，比如今天是2017年1月17日，那么17应该显示在上图42个方格中的哪个格子里呢？这个我暂时是不知道的。
　　但是如果是2017年1月1日呢？这下我就知道了，2017年1月1日肯定显示在矩阵格子的第一行（17的一个位置，绝对不会显示到8那个位置），那么到底是第几个位置呢？我也不知道。
　　但是我可以借助一个函数getDay（）来得到2017年1月1日对应的是一周的第几天（周日是第0天，周六是第6天，以此类推，正如上图中getDay（）后面标记的一行数字），这时候我就可以发现一个规律，getDay（）那一行数字正好比42矩阵中的第一行的右下角的数字（这个我们会用中继器中的Item。Index来获取）少1，紧接着2017年1月1日getDay（）1的位置就是要显示的位置（比如上图黄圈1的位置，这里我用startindex来表示）。
　　接着我就可以用这个黄圈1以及它所处的位置，计算出整个42矩阵中其他位置的日期是多少。我么拿黄圈11来举例子说明。黄圈11的位置我们是可以得到的（中继器中的Item。Index），黄圈1的位置我们刚才也知道了是startindex，那么黄圈11的Item。Indexstartindex的差值是不是就等于黄圈11的日期黄圈1的日期呢？答案当然是肯定的（用上图的例子就知道：17711110），然后我们利用这个差值，在黄圈1代表的日期加上刚才计算的差值就会得到黄圈11的日期。其他位置的日期以此类推。
　　好了，这就是大概的原理，接下来我们看具体是如何实现的。
　　实现步骤
　　实现当前月份的日历显示
　　前面已经讲到了，要用到中继器，所以先从最基本的开始，我们要用中继器构建出整个日期的框架，这里中继器只用于显示对应的日期。
　　另外在整个案例中我们还用到2个全局变量：DateNow（用来表示当前日历显示的日期），DateNow1（用来表示当前日历显示的对应月份的1日，比如2017年1月1日），DateNow1Index（用来表示DateNow1在中其中所处的位置）。
　　然后我们给当前页面的“页面加载时（OnPageLoad）”添加如下事件：
　　接着要设置中继器中的矩形把日期显示出来，给中继器的“（项目加载时）OnItemLoad”添加如下事件：
　　其中的Case1、Case2、Case3还实现了其他效果，比如设置当前日期为选中状态、设置非当月日期的颜色为灰色等等。值得一提的是，函数中的所有涉及日期的，我都使用的之前创建好的3个全局变量，这样做是为了为后面的功能实现做基础。
　　好了，到这里就可以实现当月日期的显示了，接下来我们实现上月、下月、上年、下年日历的显示。
　　上月、下月、上年、下年日期显示
　　实现上月、下月、上年、下年的基本思路则是改变全局变量DateNow，DateNow1，DateNow1Index的值。在页面初始化的时候，这三个变量就被根据当前日期赋了值，因此要实现上月、下月、上年、下年，就只对DateNow和DateNow1做addDays（），addMonths（），addYears（）操作即可，然后其他的显示逻辑一概不变。
　　我们可以随意使用部件来达到切换年度和月度的效果，比如用矩形框，但我的案例中使用的是表格，便于排版而已。
　　我给“上一月”添加“点击时（Onclick）”事件，其实对于“下一月”也是完全相同的事件，只是把其中的addMonths（1）改成了1，因为上一月要1，下一月就要1嘛。
　　而对于“上一年”和“下一年”，也是相似的套路，只不过addMonths（）函数变成了addYears（），其他一点没变。
　　好了，到这里真个原型就实现的差不多了，其他一些个性化的东西可以根据你自己的想法去创作。
　　总结
　　其实这个案例更多的是掌握日期函数的用法，这个原型的灵感并不来源于万年历，而是在我学习日期函数的时候突发奇想，想如何能把日期函数通过一个完整有趣的原型学习和应用起来，于是就有个这个案例。虽然这其中也涉及到了中继器，但也仅仅用到了中继器的布局和获取Index值。
　　文中的实现步骤并不十分详细，其实更多的是给小伙伴们提供一种思路，更多的还是需要自己的思考和尝试。