<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核心的,其他的不支援~~~ 效果如下:
二、H5自備滑塊將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武林網站的支持!