HTML5实现自带进度条和滑块滑杆效果

一、H5自带进度条

<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.value++
pgv.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"设置滑块的值。