HTML5如何實(shí)現(xiàn)自帶進(jìn)度條和滑塊滑桿效果

小編給大家分享一下HTML5如何實(shí)現(xiàn)自帶進(jìn)度條和滑塊滑桿效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

一、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     &mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash; 其實(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">的軌道

看完了這篇文章，相信你對(duì)“HTML5如何實(shí)現(xiàn)自帶進(jìn)度條和滑塊滑桿效果”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！