html5进度条怎么写

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

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

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

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

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

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

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

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

不需要后端的，前端自己判断，代码如下：

function uploadFile(){

// 获取上传文件，放到 formData对象里面

var pic = $("#myhead").get(0).files[0]

var formData = new FormData()

formData.append("file" , pic)

$.ajax({

type: "POST",

url: "upload",

data: formData ,//这里上传的数据使用了formData 对象

processData : false,

//必须false才会自动加上正确的Content-Type

contentType : false ,

//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用

xhr: function(){

var xhr = $.ajaxSettings.xhr()

if(onprogress &&xhr.upload) {

xhr.upload.addEventListener("progress" , onprogress, false)

return xhr

}

}

})

Response.Write "<br><br><br><br><br><div align=""center"">" &vbCrLf'代码开始

Response.Write "<table width=""200"" border=""0"" cellspacing=""1"" cellpadding=""1"">" &vbCrLf

Response.Write "<tr>" &vbCrLf

Response.Write "<td bgcolor=000000>" &vbCrLf

Response.Write " <table width=""200"" border=""0"" cellspacing=""0"" cellpadding=""1"">" &vbCrLf

Response.Write "<tr>" &vbCrLf

Response.Write "<td bgcolor=ffffff height=9><img src=""images/bar9.gif"" width=0 height=16 id=img2 name=img2 align=absmiddle></td></tr></table>" &vbCrLf

Response.Write "</td></tr></table></td></tr><tr>" &vbCrLf

Response.Write "<td align=center bgcolor=000000><span id=txt2 name=txt2 style=""font-size:9pt"">0</span><span style=""font-size:9pt"">%</span> <span id=txt3 name=txt3 style=""font-size:9pt"">0</span></td></tr>" &vbCrLf

Response.Write "</table>" &vbCrLf

Response.Write "</div>" &vbCrLf

Response.Flush

sql="select * from info order by info_id desc"'SQL语句

set rs=server.createobject("adodb.recordset")

rs.open sql,conn,1,1

i=0

w=rs.recordcount'得到记录集总数

Do While Not rs.EOF

info_id = rs("info_id")

makehtml_info(info_id)'注意这里函数makehtml_info(info_id)也跟着循环

i=i+1'得到现时完成数

Response.Write "<script>img2.width=" &Fix((i / w) * 200) &"" &vbCrLf'Fix函数，截尾取整，不四舍五入

Response.Write "txt2.innerHTML=""生成进度:" &FormatNumber(i / w * 100, 4, -1) &"""" &vbCrLf

Response.Write "txt3.innerHTML=""共有 <B><font color=RED>" &w &"</font></B>个 正在生成第 " &i &" 个""" &vbCrLf

Response.Write "img2.title=""(" &i &")""</script>" &vbCrLf

Response.Flush

rs.movenext

loop

rs.close'代码结束

images/bar9.gif是进度条小图片,可以用fireworks制作

2。

1。引用

<script language="javascript" src="ShowProcessBar.js"></script>

2。在提交Button或<A>或<span>加扩展属性

IsShowProcessBar="True"

文件ShowProcessBar.js如下

AddProcessbar()

var bwidth=0

var swidth = document.all.waiting.clientWidth

function CheckIsProcessBar(obj)

{

if (obj.IsShowProcessBar=="True")

{

return false

}

else

{

return true

}

}

function CheckClick(e)

{

if (e == 1)

{

if (bwidth<swidth*0.98){

bwidth += (swidth - bwidth) * 0.025

if (document.all)document.sbar.width = bwidth

else document.rating.clip.width = bwidth

setTimeout(CheckClick(1),150)

}

}

else

{

if(document.all)

{

if(document.all.waiting.style.visibility == visible)

{document.all.waiting.style.visibility = hidden

bwidth = 1}

whichIt = event.srcElement

while (CheckIsProcessBar(whichIt))

{

whichIt = whichIt.parentElement

if (whichIt == null)return true

}

document.all.waiting.style.pixelTop = (document.body.offsetHeight - document.all.waiting.clientHeight) / 2 + document.body.scrollTop

document.all.waiting.style.pixelLeft = (document.body.offsetWidth - document.all.waiting.clientWidth) / 2 + document.body.scrollLeft

document.all.waiting.style.visibility = visible

if(!bwidth)CheckClick(1)

bwidth = 1

}

else

{

if(document.waiting.visibility == show)

{document.waiting.visibility = hide

document.rating.visibility = hide

bwidth = 1}

if(e.target.href.toString() != )

{

document.waiting.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset

document.waiting.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset

document.waiting.visibility = show

document.rating.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset+document.waiting.clip.height-10

document.rating.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset

document.rating.visibility = show

if(!bwidth)CheckClick(1)

bwidth = 1

}

}

return true

}

}

function AddProcessbar()

{

var Str=""

Str+= "<div id=waiting style=position:absolutetop:50pxleft:100pxz-index:1visibility:hidden >"

Str+= "<layer name=waiting visibility=visible zIndex=2 >"

Str+= "<table border=2 cellspacing=1 cellpadding=0 bordercolorlight=#FFFFFF bordercolordark=#C0C0C0 bgcolor=#E0E0E0>"

Str+= " <tr>"

Str+= " <td bgcolor=#E0E0E0 height=30px width=300px align=center>"

Str+= " <font color=black>系统正在处理中...</font>"

Str+= " </td>"

Str+= " </tr>"

Str+= " <tr>"

Str+= " <td bgcolor=#E0E0E0>"

Str+= " <img width=1 height=10 name=sbar style=background-color:#6699cc>"

Str+= " </td>"

Str+= " </tr>"

Str+= "</table>"

Str+= "</layer>"

Str+= "</div>"

document.write(Str)

if(document.all)document.onclick = CheckClick

}

测试文件TestShowBar.HTML

<HTML>

<HEAD>

<script language="javascript" src="ShowProcessBar.js"></script>

</HEAD>

<BODY>

<A href="error.asp" IsShowProcessBar="True">A Href</a>

<BR>

<BR>

<span onclick="location.href=error.asp" style="cursor:hand" IsShowProcessBar="True"><font color=blue>Span</font></span>

<BR>

<form action="error.asp">

<input type=Submit value="Submit">

<input type=button value="normal button" IsShowProcessBar="True">

</form>

<P IsShowProcessBar="True">AAAAAAAAAAAAA</P>

</BODY>

</HTML>

一定得给分

---