H5进度条

##自带的进度条 >因为在不同的浏览器中进度条的样式不同所以在开发中很少使用这两种进度条只进行简单的介绍

1
2
3
4
5


<h2>进度条1</h2>
  <meter value=".5"></meter>
  <h2>进度条2</h2>
  <!-- progress 如果要显示 百分比的精度 需要设置 value 跟max  -->
  <progress value="50" max="100"></progress>

##自定义的进度条

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .progress{
      border: 1px solid #000;
      height: 30px;
      width:200px;
    }
    .step{
      height: 100%;
      width:50%;
      background-color: hotpink;
    }
  </style>
</head>
<body>
  <h1>自定义进度条</h1>
  <div class="progress">
    <div class="step" id='step'></div>
  </div>
  <input type="range" id='range' >
</body>
</html>

###自定义进度条的小案例随着滑块移动改变进度条

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// 先获取需要修改的dom元素
  var stepDom = document.getElementById('step');
  
  // 滑动滑块 会一直触发
  document.getElementById('range').oninput = function(){
    var value = this.value;
     // 超过了 50 变黄
     if(value>50){
       stepDom.style.backgroundColor ='yellow';
     }else{
       // 小于50变绿
       stepDom.style.backgroundColor ='green';
     }
    // 修改进度条的 width属性 
    stepDom.style.width = value +'%';
  }

文章目录