html中怎樣設置定時器
定時器在html中非常常見，比如輪播圖啊，倒計時啊，都用到了定時器，今天咪咪我就來通過倒計時的案例，教教大家怎樣使用定時器。
工具/材料
電腦
搜狗瀏覽器
webstorm
操作方法
-
01
新建一個html頁面，然后設置一個按鈕，并且給這個按鈕綁定一個函數。比如咪咪我就設置了一個函數timer，待會我們就用這個函數。
-
02
現在我要做的就是一個倒計時定時器，假設倒計時間是5秒，所以我們就需要設置一個變量來保存秒數。并且我們還要獲取到button這個元素哦。
-
03
如圖，設置一個變量用來保存定時器。setInterval就是定時器函數，它有兩個參數，第一個是函數，第二個是時間，這里我就設置了每隔1000毫秒就調用一次function（）。
-
04
接著我們開始在function里面寫代碼，首先判斷s是不是小于0，因為我做的定時器是從5秒開始倒計時，如果小于0就會出現負數，所以需要判斷是否小于0，如果小于0就清除定時器，修改按鈕里面的內容，并且讓按鈕可用。
-
05
如果不小于0，則修改按鈕的內容，并且時間減去1，同時讓按鈕不可用。
-
06
倒計時定時器做好之后，最初的效果如圖，此時按鈕顏色是比較亮的，表示的是按鈕處于可點擊狀態，并且里面的文字是“發送”。
-
07
而當我們點擊按鈕的時候，開始五秒倒計時，并且此時按鈕文字改變了，而且按鈕處于不可點擊狀態哦。而倒計時結束之后，按鈕又會變成步驟6的模樣，如果再次點擊，則會再次循環哦。
- End
- 發表于 2017-09-18 00:00
- 閱讀 ( 1106 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章