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

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

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

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

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

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

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

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

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

以下是progress的基本标签

根据 w3c 的定义，progress元素代表任务的完成度。一个progress元素标签有开始标签和结束标签。

除了通用的全局属性外，它还拥有两个自己的属性

一个进度条有两种状态：不确定和已确定

Google Chrome, Apple Safari , Opera 浏览器都是webkit内核，设置progress element 元素样式基于 -webkit-appearance: progress-bar

设置progress默认样式，一般简单的设置为 -webkit-appearance: none

对 -webkit-progress-value 属性的背景增加动画

对 -webkit-progress-value 选择器使用动画

使用::before 和 ::after 可以在progress元素上展示进度条的百分比或者准确的数字。

原文地址： https://css-tricks.com/html5-progress-element/

获取range的值就行了，然后将其显示出来，你实时改变range的值，显示的就会实时改变

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function change() {

var value = document.getElementById('range').value

document.getElementById('value').innerHTML = value

}

</script>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

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