html 下图进度条怎么实现_随笔

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery实现进度条</title>

<style>

.progressBar{width:200pxheight:8pxborder:1px solid #98AFB7border-radius:5pxmargin-top:10px}

#bar{width:0pxheight:8pxborder-radius:5pxbackground:#5EC4EA}

</style>

function progressBar(){

//初始化js进度条

$("#bar").css("width","0px")

//进度条的速度，越小越快

var speed = 20

bar = setInterval(function(){

nowWidth = parseInt($("#bar").width())

//宽度要不能大于进度条的总宽度

if(nowWidth<=200){

barWidth = (nowWidth + 1)+"px"

$("#bar").css("width",barWidth)

}else{

//进度条读满后，停止

clearInterval(bar)

}

},speed)

}

</script>

</head>

<body>

</body>

</html>

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

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

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

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

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

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

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

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

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

html 下图进度条怎么实现