HTML5實(shí)現(xiàn)自帶進(jìn)度條和滑塊滑桿效果
我要評(píng)論一、H5自帶進(jìn)度條
<div id="d"> <p id="pgv">進(jìn)度：%</p> <progress id="pg" max="" value=""></progress> </div>
運(yùn)用progress標(biāo)簽，設(shè)置好min和max數(shù)值就好?？梢杂胿alue獲取其中的進(jìn)度值
function staticProgress () {
var pg = document.getElementById('pg')
var pgv = document.getElementById('pgv')
var timer = setInterval(function () {
if (pg.value !== ) {
pg.value++
pgv.innerHTML = '進(jìn)度：' + pg.value + '%'
} else {
pgv.innerHTML = '加載完成'
clearInterval(timer)
}
}, )
}
最終效果如下：
這個(gè)顯示效果是chrome瀏覽器的，IE和FireFox的是另外的樣式！
樣式更改：
progress{
-webkit-appearance: none;
}
::-webkit-progress-bar{
/* 獲取progress */
background-color: orange;
/* 進(jìn)度條未被填充的背景顏色 */
}
::-webkit-progress-value {
background-color: rgb(, , );
/* 進(jìn)度條被填充部分的背景顏色 */
}
::-webkit-progress-inner-element {
border: px solid black;
/* 進(jìn)度條的內(nèi)邊框，注意跟outline區(qū)分 */
}
這里的樣式全部是針對(duì)webkit內(nèi)核的，其他的不支持~~~ 效果如下：
二、H5自帶滑塊
將input的type設(shè)置為range。但是這個(gè)屬性不是所有瀏覽器都支持，如果不支持，會(huì)返回默認(rèn)屬性，就是<input type="text">
（詳情參考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range）
默認(rèn)樣式：
<div id="d"> <p>H可拖動(dòng)滑塊:</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；
默認(rèn)值 = （設(shè)置最大值 < 設(shè)置最小值）？設(shè)置最小值 : 設(shè)置最小值 + ( 設(shè)置最大值 - 設(shè)置最小值 ) / 2 ———————— 其實(shí)就是取中間值
我們可以用value="7"設(shè)置滑塊的值。
(2)、<input type="range" min="-10" max="10">
min: 設(shè)置最小值； max: 設(shè)置最大值
(3)、<input type="range" min="5" max="10" step="0.01">
step: 設(shè)置步進(jìn)值，默認(rèn)是1。如果min或者max設(shè)置了小數(shù)點(diǎn)，比如：max="3.14"，這個(gè)小數(shù)點(diǎn)就取不到了，那么可以將step設(shè)置為: step="any"。
(4)、hash marks和label：
注意：目前沒(méi)有哪個(gè)瀏覽器完全支持hash marks和label這兩個(gè)屬性，比如Firefox兩個(gè)都不支持，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可以設(shè)置或返回滑塊是否自動(dòng)獲得焦點(diǎn)，設(shè)置為true后，進(jìn)入網(wǎng)頁(yè)會(huì)自動(dòng)鎖定滑塊，在鍵盤(pán)上按上下左右都可以控制
2、外觀美化：
input[type=range] {
outline: none;
-webkit-appearance: none;
/* 去除系統(tǒng)默認(rèn)appearance的樣式,常用于IOS下移除原生樣式 */
border-radius: px;
}
-webkit-appearance: none; 去除默認(rèn)樣式
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 是個(gè)CSS偽類(lèi)元素，不是所有瀏覽器都支持?？梢垣@取<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; /* 去除滑塊的默認(rèn)樣式 */
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">的軌道
總結(jié)
以上所述是小編給大家介紹的HTML5實(shí)現(xiàn)自帶進(jìn)度條和滑塊滑桿效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
html svg生成環(huán)形進(jìn)度條的實(shí)現(xiàn)方法
這篇文章主要介紹了html svg生成環(huán)形進(jìn)度條的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2019-09-23
HTML5超炫酷粒子效果的進(jìn)度條的實(shí)現(xiàn)示例
這篇文章主要介紹了HTML5超炫酷粒子效果的進(jìn)度條的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2019-08-23HTML5觸摸事件實(shí)現(xiàn)移動(dòng)端簡(jiǎn)易進(jìn)度條的實(shí)現(xiàn)方法
這篇文章主要介紹了HTML5觸摸事件實(shí)現(xiàn)移動(dòng)端簡(jiǎn)易進(jìn)度條的實(shí)現(xiàn)方法的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-04- 這篇文章主要介紹了網(wǎng)頁(yè)加載進(jìn)度條，文中解釋了屬性和應(yīng)用，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-17
- 這篇文章主要介紹了HTML頁(yè)面縮小后顯示滾動(dòng)條的示例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-26
