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

一年一度的雙十一快要來臨了，最近閑來無事，用axure8.0實現了一個倒計時的功能，有興趣的朋友閑來無事，可以鑒賞一番。至于大牛們就直接忽略吧。

預覽：

一、準備元件

1、添加一個文本框，用來輸入要進行倒計時時間，并將文本框的類型改為“日期”，并給文本框一個名字，我這里就取名叫“倒計時日期”；

2、添加9個文本標簽。

分別起名為：“當前時間”、“倒計時日期文字”、“差值”、“天”、“時”、“分”、“秒”、“提示信息”、“標題”；9個文本標簽的作用分別是：

• 當前時間：存放當前時間(以毫秒的形式存放)；
• 倒計時日期文字：存放“倒計時日期”文本框的文字內容；
• 差值：存放倒計時日期與當前時間的差；
• 天：存放倒計時日期與當前時間相差多少天；
• 時：存放倒計時日期與當前時間去掉天數外，相差多少小時；
• 分：存放倒計時日期與當前時間去掉天數、小時后，相差的分鐘；
• 秒：存放倒計時日期與當前時間去掉天數、小時數、分鐘數后，相差的秒數；
• 提示信息：異常情況提示內容；
• 標題：倒計時標題。

這些文本標簽一般情況下默認為隱藏狀態，在需要的情況下顯示，這里就統一設置成隱藏了；

3、添加一個動態面板，并給動態面板兩個狀態。

這個動態面板是核心元件了，它就是用來顯示倒計時用的，這里取名叫“倒計時”。兩個狀態里面分別放一個文本標簽，用來顯示倒計時的，分別取名字叫“倒計時1”、“倒計時2”。

本人比較懶，這里就不對面板狀態進行命名了，朋友們可根據自己喜好自行取名；

4、最后一步，我們還需要一個按鈕，用來計算倒計時用的，我們這里就取名字叫“開始倒計時”吧，文字內容就定為“倒計時”了；

二、添加用例

1、首先，我們給倒計時按鈕“開始倒計時”添加用例，首先我們要考慮清楚在點擊“開始倒計時”按鈕時，可能有幾種情況發生：

• 倒計時的日期為空
• 倒計時的日期小于當前時間
• 倒計時的日期大于等于當前時間。

想清楚這些，我們就開始給“開始倒計時”按鈕添加“鼠標單擊時”用例了；

1）無論什么情況下，首先我們要先取得當前的時間，倒計時日期的文字以及差值，所以這里我們可以先設置“當前時間”、“倒計時日期文字”、“差值”三個文本標簽的內容；

①當前時間：直接通過日期函數getTime()獲取當前的時間(毫秒)

②倒計時日期文字：通過“倒計時日期”文本獲取倒計時日期文字(Axure8.0中貌似不能直接通過元件文字獲取，這里采用了元件的text獲取)；

③差值：通過“倒計時日期文字”和“當前時間”相減獲取，“倒計時日期文字”通過日期函數getTime()獲取毫秒數；

2）判斷“倒計時日期”的值是否為空；如果“倒計時日期”為空，則給出提示信息“請選擇倒計時日期！”；

3）判斷“倒計時日期”的值是否小于當前時間；之前已經計算過“倒計時日期”與當前時間的差值了，這里我們就可以直接使用差值來判斷了；

4）開始倒計時：如果滿足“倒計時日期”大于等于當前時間，我們就可以設置倒計時了；通過數學函數floor()函數算出“倒計時日期”與當前時間相差的天數、小時數、分鐘數、秒數，并把天數、小時數、分鐘數、秒數合并在一起，賦值“倒計時”動態面板中的文本標簽“倒計時1”和“倒計時2”；然后設置“倒計時”面板狀態為“Next”，向后循環，并且循環間隔為1000毫秒；最后再把隱藏的“倒計時”動態面板顯示出出來；

2、不要以為到這里到這里就大功告成了，其實還差關鍵的一步呢。那就是讓倒計時“動起來”，不然你的倒計時只是你點擊“開始倒計時”按鈕那一刻的倒計時，此時此刻的倒計時是顯示不出來的哦。

想要倒計時“動”起來，需要在“倒計時”動態面板中“狀態改變時”添加用例：

用例的設置其實跟“開始倒計時”按鈕里面的基本是一樣的，這里就不重復說明了。

3、預覽：到這里動態的倒計時已經完成了，不妨按一下“F5”鍵貨在axure中點擊預覽，體驗一下自己的成果吧！

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