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

預(yù)覽：

一、準(zhǔn)備元件

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

2、添加9個(gè)文本標(biāo)簽。

分別起名為：“當(dāng)前時(shí)間”、“倒計(jì)時(shí)日期文字”、“差值”、“天”、“時(shí)”、“分”、“秒”、“提示信息”、“標(biāo)題”；9個(gè)文本標(biāo)簽的作用分別是：

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

這些文本標(biāo)簽一般情況下默認(rèn)為隱藏狀態(tài)，在需要的情況下顯示，這里就統(tǒng)一設(shè)置成隱藏了；

3、添加一個(gè)動(dòng)態(tài)面板，并給動(dòng)態(tài)面板兩個(gè)狀態(tài)。

這個(gè)動(dòng)態(tài)面板是核心元件了，它就是用來顯示倒計(jì)時(shí)用的，這里取名叫“倒計(jì)時(shí)”。兩個(gè)狀態(tài)里面分別放一個(gè)文本標(biāo)簽，用來顯示倒計(jì)時(shí)的，分別取名字叫“倒計(jì)時(shí)1”、“倒計(jì)時(shí)2”。

本人比較懶，這里就不對(duì)面板狀態(tài)進(jìn)行命名了，朋友們可根據(jù)自己喜好自行取名；

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

二、添加用例

1、首先，我們給倒計(jì)時(shí)按鈕“開始倒計(jì)時(shí)”添加用例，首先我們要考慮清楚在點(diǎn)擊“開始倒計(jì)時(shí)”按鈕時(shí)，可能有幾種情況發(fā)生：

• 倒計(jì)時(shí)的日期為空
• 倒計(jì)時(shí)的日期小于當(dāng)前時(shí)間
• 倒計(jì)時(shí)的日期大于等于當(dāng)前時(shí)間。

想清楚這些，我們就開始給“開始倒計(jì)時(shí)”按鈕添加“鼠標(biāo)單擊時(shí)”用例了；

1）無論什么情況下，首先我們要先取得當(dāng)前的時(shí)間，倒計(jì)時(shí)日期的文字以及差值，所以這里我們可以先設(shè)置“當(dāng)前時(shí)間”、“倒計(jì)時(shí)日期文字”、“差值”三個(gè)文本標(biāo)簽的內(nèi)容；

①當(dāng)前時(shí)間：直接通過日期函數(shù)getTime()獲取當(dāng)前的時(shí)間(毫秒)

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

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

2）判斷“倒計(jì)時(shí)日期”的值是否為空；如果“倒計(jì)時(shí)日期”為空，則給出提示信息“請(qǐng)選擇倒計(jì)時(shí)日期！”；

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

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

2、不要以為到這里到這里就大功告成了，其實(shí)還差關(guān)鍵的一步呢。那就是讓倒計(jì)時(shí)“動(dòng)起來”，不然你的倒計(jì)時(shí)只是你點(diǎn)擊“開始倒計(jì)時(shí)”按鈕那一刻的倒計(jì)時(shí)，此時(shí)此刻的倒計(jì)時(shí)是顯示不出來的哦。

想要倒計(jì)時(shí)“動(dòng)”起來，需要在“倒計(jì)時(shí)”動(dòng)態(tài)面板中“狀態(tài)改變時(shí)”添加用例：

用例的設(shè)置其實(shí)跟“開始倒計(jì)時(shí)”按鈕里面的基本是一樣的，這里就不重復(fù)說明了。

3、預(yù)覽：到這里動(dòng)態(tài)的倒計(jì)時(shí)已經(jīng)完成了，不妨按一下“F5”鍵貨在axure中點(diǎn)擊預(yù)覽，體驗(yàn)一下自己的成果吧！

本文由 @無淚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。