做网页如何做出进度条,类似播放器缓冲读取的效果。(高分高分)

跪求大师们帮忙,分不是问题,小弟会加分的。

就是类似播放器缓冲读取的效果,读取速度很快,从%0-%100

读取完成后,弹出一个对话框。。

最好能用HTML的语法实现,小弟不懂其它语法!!

如果是其它语法,可以帮小弟写好现成的嘛!!!

发给小弟的信箱 7906471@qq.com

拜托各位大大了,我定会加分,700分以内,要多少都可以 拜托拜托拜托
会的那位大哥你加下我的QQ 7906471 我在这里有些地方不会 可以帮我下吗 我奉献700分!全部家当!!

小弟也是初来乍到,分并不是非常多 拜托啦!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>progress</title>
<script language="javascript">
//进度条对象
//参数id: 包容进度条的框架元素ID
var ProgressBar = function(id){
var bar = this;
this.width = 300; this.height = 7;//进度条的宽度和高度
this.bgcolor = "white"; this.barcolor = "lightblue";//进度条的背景色和前景色
this.fontSize = 20; this.fontColor = "blue";//文字的字号和颜色
//初始化进度条
this.init = function(){
var otable = document.createElement("TABLE");
otable.setAttribute("bgColor", bar.bgcolor);
otable.setAttribute("cellpadding", 0);
otable.setAttribute("cellspacing", 0);
otable.style.cssText = "width:" + parseInt(bar.width) + "px; height:" + parseInt(bar.height) + "px; border:0; border-collapse:collapse;";

var otr = otable.insertRow(-1);
var otd = document.createElement("td");
otd.setAttribute("padding", 0);
otd.setAttribute("width", "100%");
otr.appendChild(otd);

var itable = document.createElement("table");
itable.setAttribute("id", "tb_bar");
itable.setAttribute("height", "100%");
itable.setAttribute("align", "left");
itable.setAttribute("bgColor", bar.barcolor);
itable.setAttribute("width", 0);
otd.appendChild(itable);

var itr = itable.insertRow(-1);
var itd = document.createElement("td");
itr.appendChild(itd);

var tb = document.createElement("TABLE");
tb.style.cssText ="border:0; border-collapse:collapse; cellpadding:0; cellspacing:0";
var tr = tb.insertRow(-1);
var ltd = document.createElement("td");
ltd.appendChild(otable);
var rtd = document.createElement("td");
var font = document.createElement("FONT");
font.setAttribute("id", "font_progress");
font.style.fontSize = parseInt(bar.fontSize) + "px";
font.style.color = bar.fontColor;
font.innerHTML = "0%";
rtd.appendChild(font);
tr.appendChild(ltd);
tr.appendChild(rtd);

document.getElementById(id).appendChild(tb);
}
//设置进度条的进度
//参数progress: 进度,取值范围0-100之间的整数
this.setProgress = function(progress){
if(progress >=100){progress = 100;}
var itable = document.getElementById("tb_bar");
itable.setAttribute("width", (parseInt(progress) + "%"));
var font = document.getElementById("font_progress");
font.innerHTML = parseInt(progress) + "%";
}
}
</script>
</head>

<body>
<div id="pb">
<script language="javascript">
var bar = new ProgressBar("pb");
bar.bgcolor = "gray";
bar.fontColor = "red";
bar.init();

var progress = 1;
var timer = window.setTimeout(setPb, 100);
function setPb()
{
progress = progress + 1;
if(progress >= 100)
{
window.clearTimeout(setPb);

}
if(progress==101)
{
window.alert("是不是这样啊,给500分吧");
}
bar.setProgress(progress);

timer = window.setTimeout(setPb, 100);

}

</script>
</div>
</body>
</html>
温馨提示:答案为网友推荐,仅供参考
第1个回答  2010-10-14
试试javascript

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网