需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：<div style="overflow: scroll">hello world!</div>。
3、浏览器运行index.html页面，此时成功在html中指定的div中添加了滚动条。
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>
一定得给分
获取range的值就行了，然后将其显示出来，你实时改变range的值，显示的就会实时改变
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="range" type="range" min="0" max="50000" value="5"step="10" oninput="change()" onchange="change()">
<span id="value">0</span>
<script type='text/javascript'>
function change() {
var value = document.getElementById('range').value
document.getElementById('value').innerHTML = value
}
</script>
</body>
</html>
