中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

對于萬年歷的概念，大家已經非常熟悉了，尤其臨近節假日的時候，我們會習慣去查看日歷上的放假安排，但是經常覺得很坑爹啊有木有，不過這是題外話了。今天這個案例就和萬年歷有關，教大家使用“中繼器”和“日期函數”來實現一個萬年歷的原型，不過這原型可不是死的哦，是可以真真正正顯示萬年日期的萬年歷。

原型預覽：

原型說明：萬年歷原型在初始化的時候可以自動顯示當前日期，并鎖定當天（Today），通過“上一年”“上一月”“下一月”“下一年”操作，可顯示對應年份及月份的日歷，“返回今天”可返回當前月份日歷及鎖定當天（Today）。

學習重點

通過本案例，我們主要來練習中繼器和日期函數的使用，中繼器用于顯示日歷的天，日期函數則用于處理日歷的顯示邏輯。其中使用到的日期函數將包括：Now-獲取當前日期、getDate（）-獲取天、getDay（）-獲取一周中的第幾天、addDays（）-增加/減少天、addMonths（）-增加/減少月、addYears（）-增加/減少年。

原理說明

首先我用一個7*6的矩陣（中繼器）來顯示日期，至于為什么是7*6而不是7*5，大家仔細觀察一下日歷就可以發現了，7*5有時候是不能將一整月的日期顯示全的。接下來我就是要把日期顯示到對應的矩陣單元上，下面我用一個圖來表示：

上圖是一個日歷的大概的樣子，比如今天是2017年1月17日，那么17應該顯示在上圖42個方格中的哪個格子里呢？這個我暫時是不知道的。

但是如果是2017年1月1日呢？這下我就知道了，2017年1月1日肯定顯示在矩陣格子的第一行（1-7的一個位置，絕對不會顯示到8那個位置），那么到底是第幾個位置呢？我也不知道。

但是我可以借助一個函數getDay（）來得到2017年1月1日對應的是一周的第幾天（周日是第0天，周六是第6天，以此類推，正如上圖中getDay（）后面標記的一行數字），這時候我就可以發現一個規律，getDay（）那一行數字正好比42矩陣中的第一行的右下角的數字（這個我們會用中繼器中的Item.Index來獲?。┥?，緊接著2017年1月1日getDay（）+1的位置就是要顯示的位置（比如上圖黃圈1的位置，這里我用start_index來表示）。

接著我就可以用這個黃圈1以及它所處的位置，計算出整個42矩陣中其他位置的日期是多少。我么拿黃圈11來舉例子說明。黃圈11的位置我們是可以得到的（中繼器中的Item.Index），黃圈1的位置我們剛才也知道了是start_index，那么黃圈11的Item.Index-start_index的差值是不是就等于黃圈11的日期-黃圈1的日期呢？答案當然是肯定的（用上圖的例子就知道：17-7=11-1=10），然后我們利用這個差值，在黃圈1代表的日期加上剛才計算的差值就會得到黃圈11的日期。其他位置的日期以此類推。

好了，這就是大概的原理，接下來我們看具體是如何實現的。

實現步驟

實現當前月份的日歷顯示

前面已經講到了，要用到中繼器，所以先從最基本的開始，我們要用中繼器構建出整個日期的框架，這里中繼器只用于顯示對應的日期。

另外在整個案例中我們還用到2個全局變量：Date_Now（用來表示當前日歷顯示的日期），Date_Now_1（用來表示當前日歷顯示的對應月份的1日，比如2017年1月1日），Date_Now_1_Index（用來表示Date_Now_1在中其中所處的位置）。

然后我們給當前頁面的“頁面加載時（OnPageLoad）”添加如下事件：

接著要設置中繼器中的矩形把日期顯示出來，給中繼器的“（項目加載時）OnItemLoad”添加如下事件：

其中的Case1、Case2、Case3還實現了其他效果，比如設置當前日期為選中狀態、設置非當月日期的顏色為灰色等等。值得一提的是，函數中的所有涉及日期的，我都使用的之前創建好的3個全局變量，這樣做是為了為后面的功能實現做基礎。

好了，到這里就可以實現當月日期的顯示了，接下來我們實現上月、下月、上年、下年日歷的顯示。

上月、下月、上年、下年日期顯示

實現上月、下月、上年、下年的基本思路則是改變全局變量Date_Now，Date_Now_1，Date_Now_1_Index的值。在頁面初始化的時候，這三個變量就被根據當前日期賦了值，因此要實現上月、下月、上年、下年，就只對Date_Now和Date_Now_1做 addDays（），addMonths（），addYears（）操作即可，然后其他的顯示邏輯一概不變。

我們可以隨意使用部件來達到切換年度和月度的效果，比如用矩形框，但我的案例中使用的是表格，便于排版而已。

我給“上一月”添加“點擊時（Onclick）”事件，其實對于“下一月”也是完全相同的事件，只是把其中的addMonths(-1)改成了1，因為上一月要-1，下一月就要+1嘛。

而對于“上一年”和“下一年”，也是相似的套路，只不過addMonths()函數變成了addYears()，其他一點沒變。

好了，到這里真個原型就實現的差不多了，其他一些個性化的東西可以根據你自己的想法去創作。

總結

其實這個案例更多的是掌握日期函數的用法，這個原型的靈感并不來源于萬年歷，而是在我學習日期函數的時候突發奇想，想如何能把日期函數通過一個完整有趣的原型學習和應用起來，于是就有個這個案例。雖然這其中也涉及到了中繼器，但也僅僅用到了中繼器的布局和獲取Index值。

文中的實現步驟并不十分詳細，其實更多的是給小伙伴們提供一種思路，更多的還是需要自己的思考和嘗試。

作者：RAEDME大鵬，微信：urmagic

本文由 @RAEDME大鵬 原創發布于人人都是產品經理。未經許可，禁止轉載。