教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

UI設計之JS效果-如何制作文字倒計時?【UI設計面試題】

更新時間:2018年01月10日14時46分 來源:傳智播客 瀏覽次數(shù):

效果圖：

點擊前

點擊后

步驟一：

新建按鈕標簽，并起上類名

步驟二：

為按鈕寫上樣式;并且新建一個類名.code-time用作點擊按鈕后添加

步驟三：

引入JQ文件，JQ的版本不限。

步驟四：

在script標簽里新建變量，60為秒數(shù)，可根據(jù)個人情況更改;如要更改，下面的函數(shù)也要對應更改。

步驟五：

o為傳參使用;

進行判斷：

1.如果倒計時秒數(shù)為0;執(zhí)行當前按鈕解除點擊禁止;還原按鈕文字;去掉類名(背景顏色);時間變?yōu)?0秒

2.如果倒計時秒數(shù)不為0(也就是倒計時中);執(zhí)行當前按鈕添加類名(背景顏色);禁止按鈕點擊(以防用戶多次點擊產(chǎn)生BUG);按鈕文字變成倒計時數(shù)字;倒計時的秒數(shù)一秒減一;

步驟六：

為此按鈕寫上點擊事件，執(zhí)行函數(shù)，傳參為自己

所有代碼：




本文版權歸傳智播客UI設計綜合設計師學院所有，歡迎轉載，轉載請注明作者出處。謝謝！
作者：傳智播客UI設計綜合設計師培訓學院

首發(fā)：http://xamj520.com/ui/
0 分享到：
和我們在線交談！