築夢角落

致力於用最生活化的例子讓所有人都能懂程式,也喜歡分享動漫、小說心得,以及自己的所見所聞、所思所想。

【js+css】倒數計時器進度條範例,一次弄懂left跟right屬性

最後更新時間 : 2022-05-28 | viewed : 1139

進度條

 

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

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

 

 

目標


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

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

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

用 css 來改變進度條的方向(向左、向右)用 js 來改變遞減或遞增

 

作法


要把向左遞減改成向右遞減,只要將 barleft: 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 變小就是由右向左縮減的錯覺。

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

 

希望有幫助到你!

 

 
我要留言!
 

X
暱稱(選填)
email(選填,僅站長可見。)
留言 To:#