H5自帶進度條&滑塊

一、H5自帶進度條

<div id="d1">
  <p id="pgv">進度：0%</p>
  <progress id="pg" max="100" value="0"></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 !== 100) {
      pg.value++
      pgv.innerHTML = '進度：' + pg.value + '%'
    } else {
      pgv.innerHTML = '加載完成'
      clearInterval(timer)
    }
  }, 100)
}

最終效果如下：

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

樣式更改：

 

progress{
    -webkit-appearance: none;
}
::-webkit-progress-bar{
    /* 獲取progress */
    background-color: orange;
    /* 進度條未被填充的背景顏色 */
}
::-webkit-progress-value {
    background-color: rgb(43, 255, 0);
    /* 進度條被填充部分的背景顏色 */
}
::-webkit-progress-inner-element {
    border: 2px 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="d3">
  <p>H5可拖動滑塊:</p>
  <input type="range" name="points" min="0" max="100" id="h5pro"/>
</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="0" max="100" step="any" id="h5pro"  list="tickmarks"/>
<datalist id="tickmarks">
    <option value="0">
    <option value="10">
    <option value="20">
    <option value="30">
    <option value="40">
    <option value="50">
    <option value="60">
    <option value="70">
    <option value="80">
    <option value="90">
    <option value="100">
</datalist>

b) label ：

 

<input type="range" name="points" min="0" max="100" step="any" id="h5pro"  list="tickmarks"/>
<datalist id="tickmarks">
    <option value="0" label="0%">
    <option value="10">
    <option value="20">
    <option value="30">
    <option value="40">
    <option value="50" label="50%">
    <option value="60">
    <option value="70">
    <option value="80">
    <option value="90">
    <option value="100" label="100%">
</datalist>

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

2、外觀美化：

 

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

 

-webkit-appearance: none; 去除默認樣式

input[type=range]::-webkit-slider-runnable-track {
 height: 15px;
 border-radius: 10px;
 box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
}

::-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: 25px;
 width: 25px;
 margin-top: -5px;
 background:#7B05E0;
 border-radius: 50%;
 border: solid 0.125em rgba(205, 224, 230, 0.5);
 box-shadow: 0 .125em .125em #3b4547;
}

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