更新時(shí)間:2018-01-10 來(lái)源:黑馬程序員 瀏覽量:
效果圖:
點(diǎn)擊前
點(diǎn)擊后
步驟一:
新建按鈕標(biāo)簽,并起上類名
步驟二:
為按鈕寫(xiě)上樣式;并且新建一個(gè)類名.code-time用作點(diǎn)擊按鈕后添加
步驟三:
引入JQ文件,JQ的版本不限。
步驟四:
在script標(biāo)簽里新建變量,60為秒數(shù),可根據(jù)個(gè)人情況更改;如要更改,下面的函數(shù)也要對(duì)應(yīng)更改。
步驟五:
o為傳參使用;
進(jìn)行判斷:
1.如果倒計(jì)時(shí)秒數(shù)為0;執(zhí)行當(dāng)前按鈕解除點(diǎn)擊禁止;還原按鈕文字;去掉類名(背景顏色);時(shí)間變?yōu)?0秒
2.如果倒計(jì)時(shí)秒數(shù)不為0(也就是倒計(jì)時(shí)中);執(zhí)行當(dāng)前按鈕添加類名(背景顏色);禁止按鈕點(diǎn)擊(以防用戶多次點(diǎn)擊產(chǎn)生BUG);按鈕文字變成倒計(jì)時(shí)數(shù)字;倒計(jì)時(shí)的秒數(shù)一秒減一;
步驟六:
為此按鈕寫(xiě)上點(diǎn)擊事件,執(zhí)行函數(shù),傳參為自己
所有代碼:
本文版權(quán)歸黑馬程序員UI設(shè)計(jì)綜合設(shè)計(jì)師學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!
作者:黑馬程序員UI設(shè)計(jì)綜合設(shè)計(jì)師培訓(xùn)學(xué)院
首發(fā):http://ui.itheima.com/