上次我們已經用 javascript（含jQuery）+ css 實作過一個倒數計時器，並且以進度條的型式來展示，也解釋過程式背後的邏輯思路，這次我們就進一步嘗試讓進度條呈現出不同的結果吧！

還沒看過上一篇教學的朋友，建議先看過之後再回來看這篇唷。

目標

在上一篇教學裡，我們成功做出一個倒數計時器，以及向左遞減的進度條。

但是依據不同需求，進度條也可能要以不同方式呈現，不只要能向左遞減，也要能向右遞減，或是將遞減效果改為遞增。

聽起來好像很麻煩，但只要理解 css 裡的 left 跟 right 屬性的原理，其實只需要改動一行即可達成目的。

用 css 來改變進度條的方向（向左、向右），用 js 來改變遞減或遞增。

作法

要把向左遞減改成向右遞減，只要將 bar 的 left: 0 改成 right: 0 就好了。

這是因為 css 的 left 屬性，指的是要距離左邊界多遠。

在上一篇教學範例裡，我們將 bar 的 left 設定為 0，表示距離左邊界 0 個單位，換個概念來說就是靠左。

所以當我們改而將 right 屬性設定為 0 時，bar 就會變成靠右。

left 跟 right 屬性的單位可以是 px、pt、em、rem...，只是通常不會在 0 後面加上單位（要加也可以），因為對 0 而言，單位沒有意義。若不為 0 則需要加上單位，例如 left: 5px;。

順帶一提，left 跟 right 是無法同時使用的屬性，因為一個東西不可能既靠左又靠右，若同時使用必然只會實現其中一個效果。

進一步思考

你可能想問，為什麼讓 bar 靠左就會向左遞減，讓 bar 靠右就會向右遞減？

靠左或靠右，跟遞減的方向有什麼關係？

這個問題的關鍵在於長度是沒有方向性的，遞減只意味著長度變化（越來越短），但無法說它是從右向左縮減，還是從左向右縮減。

所以用程式步驟來描述就會變成這樣：

(1) bar 長度變短

(2) 將 bar 靠左（或靠右）

隨著計時器的運作，(1) 跟 (2) 的步驟會一直循環，從視覺上看來就像是進度條向左或向右遞減，但實際上其實是一直將變短的 bar 往左靠或往右靠。

只要能理解這點，相信讓進度條向左遞增或向右遞增也難不倒你了！

完整程式碼

（若無法正常顯示，請移駕至CodePen：A Pen by aa41807 (codepen.io)）

因為這只是一個示例，所以對 CSS 樣式沒有多加琢磨，並且為了易於說明，程式碼也寫得比較簡單直接，沒有過度封裝或抽象化。

實際使用的時候可以視自己的需求修改或重寫。

補充

在使用 left 及 right 屬性時，position 需設為 absolute 才有作用。

此外，雖然前面說長度沒有方向性，所以無法說它是從右向左縮減，還是從左向右縮減，但是在 css 裡，預設狀態通常是 left: 0，也就是預設靠左對齊，這很容易給人 width 變小就是由右向左縮減的錯覺。

話雖如此，預設靠左對齊在多大數的情境裡依然是方便的，寫程式的時候只要適時地跳脫程式語言的世界來思考，就不容易被便利性引起的某些表象給迷惑。

希望有幫助到你！