平武建站

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

小编给大家分享一下HTML5如何实现自带进度条和滑块滑杆效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的永春网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

一、H5自带进度条

 
   进度：%

   
 

运用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)
     }
   }, )
 }

最终效果如下：

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

这个显示效果是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内核的，其他的不支持~~~  效果如下：

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

二、H5自带滑块

将input的type设置为range。但是这个属性不是所有浏览器都支持，如果不支持，会返回默认属性，就是

（详情参考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range）

默认样式：

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

 
   
H可拖动滑块:

   
 

1、自带属性：

(1)、defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2；

默认值 = （设置最大值 < 设置最小值）？设置最小值 : 设置最小值 + ( 设置最大值 - 设置最小值 ) / 2     ———————— 其实就是取中间值

我们可以用value="7"设置滑块的值。

(2)、

min: 设置最小值； max: 设置最大值

(3)、

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：

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


  
      
      
      
      
      
      
      
     
     
     
     
 

b) label ：

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


  
      
      
      
      
      
      
      
     
     
     
     
 

(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伪类元素，不是所有浏览器都支持。可以获取的轨道

详情参考：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 可以获取的轨道

看完了这篇文章，相信你对“HTML5如何实现自带进度条和滑块滑杆效果”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


分享标题：HTML5如何实现自带进度条和滑块滑杆效果
本文URL：http://pwwzsj.com/article/iiohdd.html

其他资讯