HTML5實現自帶進度條和滑桿滑桿效果

<div id=d> <p id=pgv>進度：%</p> <progress id=pg max= value=></progress> </div>

運用progress標籤，設定好min和max數值就好。可以用value取得其中的進度值

function staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var timer = setInterval(function () { if (pg.value !== ++ pg.valueue. .innerHTML = '進度：' + pg.value + '%' } else { pgv.innerHTML = '載入完成' clearInterval(timer) } }, ) }

最終效果如下：

這個顯示效果是chrome瀏覽器的，IE和FireFox的是另外的樣式！

樣式變更：

 progress{ -webkit-appearance: none; } ::-webkit-progress-bar{ /* 取得progress */ background-color: orange; /* 進度條未填入的背景顏色*/ } ::-webkit-progress -value { background-color: rgb(, , ); /* 進度條被填滿部分的背景顏色*/ } ::-webkit-progress-inner-element { border: px solid black; /* 進度條的內邊框，注意跟outline區分*/ }

這裡的樣式全部是針對webkit核心的，其他的不支援~~~ 效果如下：

將input的type設定為range。但是這個屬性不是所有瀏覽器都支持，如果不支持，會回傳預設屬性，就是<input type=text>

（詳情請參考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range）

預設樣式：

 <div id=d> <p>H可拖曳滑桿:</p> <input type=range name=points min= max= id=hpro/> </div>

1、自帶屬性：

 (1)、defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2；

預設值= （設定最大值< 設定最小值）？設定最小值: 設定最小值+ ( 設定最大值- 設定最小值) / 2 ---- 其實就是取中間值

我們可以用value=7設定滑桿的值。

(2)、 <input type=range min=-10 max=10>

min: 設定最小值； max: 設定最大值

(3)、 <input type=range min=5 max=10 step=0.01>

step: 設定步進值，預設是1。如果min或max設定了小數點，例如：max=3.14，這個小數點就取不到了，那麼可以將step設定為: step=any。

(4)、hash marks和label：

注意：目前沒有哪個瀏覽器完全支援hash marks和label這兩個屬性，例如Firefox兩個都不支持，Chrome支持hash marks但是不支援label.

a) hash marks：

 <input type=range name=points min= max= step=any id=hpro list=tickmarks/> <datalist id=tickmarks> <option value=> <option value=> <option value=> <option value=> < option value=> <option value=> <option value=> <option value=> <option value=> <option value=> <option value=> </datalist>

b) label ：

 <input type=range name=points min= max= step=any id=hpro list=tickmarks/> <datalist id=tickmarks> <option value= label=%> <option value=> <option value=> <option value => <option value=> <option value= label=%> <option value=> <option value=> <option value=> <option value=> <option value= label=%> </datalist>

(5)、autofocus可以設定或返回滑桿是否自動取得焦點，設定為true後，進入網頁會自動鎖定滑桿，在鍵盤上按上下左右都可以控制

2、外觀美化：

 input[type=range] { outline: none; -webkit-appearance: none; /* 去除系統預設appearance的樣式,常用於IOS下移除原生樣式*/ border-radius: px; }

-webkit-appearance: none; 去除預設樣式

input[type=range]::-webkit-slider-runnable-track { height: px; border-radius: px; box-shadow: px px #deff, inset .em .em #d; }

::-webkit-slider-runnable-track 是CSS偽類元素，不是所有瀏覽器都支援。可以取得<input type=range>的軌道

詳情參考：https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; /* 移除滑桿的預設樣式*/ height: px; width: px; margin-top: -px; background:# BE; border-radius: %; border: solid .em rgba(, , , .); box-shadow: .em .em #b; }

::-webkit-slider-thumb 可以取得<input type=range>的軌道

以上所述是小編跟大家介紹的HTML5實現自備進度條和滑塊滑桿效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網站的支持！