如何用html5在网页上设置进度条

首先，我们制作的这个进度条并没有后台数据作为支撑，所以是一个靠js实现的一个简单的页面。

我们首先需要新建一个html5的页面，其使用的progress元素实在html5时代才出现的。

我们在新建的页面中，输入一个段落标签，一个进度条，一个button按钮。

然后，我们需要设置一下进度条显示的进度。value代表从多少开始，max代表到多少结束。我们做的是百分比形式的，应该写成这样的。

这些做好之后，我们需要书写两个小的事件，实现原理大体上是鼠标单击下载按钮，开始下载变为正在下载百分之多少，等到达到我们预设的时间后显示下载完成。

我们之前已经给p标签和progress标签分别赋予了不同的id，我们需要获取到这两个元素，并将他们赋给两个变量。

我们还要将progress的初始值设为0,当鼠标单击的时候，我们以一定的时间为周期调用写好的事件。

函数写好之后，我们在浏览器中调试，点击下载按钮之后会在300ms内完成下载时间。

<div>显示度量值： <span id="value">0</span>%</div>

<meter id="meter" min="0" max="100" value="0"></meter>

<details>

    <summary>注释：</summary>

    <p>IE 不支持 meter 标签</p>

    <p>进度条每0.5秒钟增加1%，直至到100%，然后再重复</p>

</details>

<script>

let meter = document.getElementById('meter')

let myValue = document.getElementById('value')

setInterval(function () {

    if (meter.value == 100) {

        meter.value = 0

    } else {

        meter.value += 1

    }

    myValue.innerHTML = meter.value

}, 500)

</script>

HTML代码：

<section class="container">

<div class="progress">

<span style="width: 20%"><span>20%</span></span>

</div>

<div class="progress">

<span class="green" style="width: 40%"><span>40%</span></span>

</div>

<div class="progress">

<span class="orange" style="width: 60%"><span>60%</span></span>

</div>

<div class="progress">

<span class="red" style="width: 80%"><span>80%</span></span>

</div>

<div class="progress">

<span class="blue" style="width: 100%"><span>100%</span></span>

</div>

</section>

从HTML结构中我们可以看出，类名为progress的div是整个进度条的父容器，里面的span则是当前进度，通过width来定义不同的进度值，同时定义不同的颜色类，比如orange，以便待会在CSS中进行样式渲染。

CSS代码：

.progress {

height: 20px

background: #ebebeb

border-left: 1px solid transparent

border-right: 1px solid transparent

border-radius: 10px

}

.progress >span {

position: relative

float: left

margin: 0 -1px

min-width: 30px

height: 18px

line-height: 16px

text-align: right

background: #cccccc

border: 1px solid

border-color: #bfbfbf #b3b3b3 #9e9e9e

border-radius: 10px

background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%)

background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%)

background-image: -o-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%)

background-image: linear-gradient(to bottom, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%)

-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2)

box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2)

}

.progress >span >span {

padding: 0 8px

font-size: 11px

font-weight: bold

color: #404040

color: rgba(0, 0, 0, 0.7)

text-shadow: 0 1px rgba(255, 255, 255, 0.4)

}

.progress >span:before {

content: ''

position: absolute

top: 0

bottom: 0

left: 0

right: 0

z-index: 1

height: 18px

background: url("../img/progress.png") 0 0 repeat-x

border-radius: 10px

}

.progress .green {

background: #85c440

border-color: #78b337 #6ba031 #568128

background-image: -webkit-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%)

background-image: -moz-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%)

background-image: -o-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%)

background-image: linear-gradient(to bottom, #b7dc8e 0%, #99ce5f 70%, #85c440 100%)

}

.progress .red {

background: #db3a27

border-color: #c73321 #b12d1e #8e2418

background-image: -webkit-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%)

background-image: -moz-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%)

background-image: -o-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%)

background-image: linear-gradient(to bottom, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%)

}

.progress .orange {

background: #f2b63c

border-color: #f0ad24 #eba310 #c5880d

background-image: -webkit-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%)

background-image: -moz-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%)

background-image: -o-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%)

background-image: linear-gradient(to bottom, #f8da9c 0%, #f5c462 70%, #f2b63c 100%)

}

.progress .blue {

background: #5aaadb

border-color: #459fd6 #3094d2 #277db2

background-image: -webkit-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%)

background-image: -moz-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%)

background-image: -o-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%)

background-image: linear-gradient(to bottom, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%)

}

---