做网页如何做出进度条，类似播放器缓冲读取的效果。（高分高分）
跪求大师们帮忙，分不是问题，小弟会加分的。就是类似播放器缓冲读取的效果，读取速度很快，从%0-%100读取完成后，弹出一个对话框。。最好能用HTML的语法实现，小弟不懂其...
跪求大师们帮忙，分不是问题，小弟会加分的。
就是类似播放器缓冲读取的效果，读取速度很快，从%0-%100
读取完成后，弹出一个对话框。。
最好能用HTML的语法实现，小弟不懂其它语法！！
如果是其它语法，可以帮小弟写好现成的嘛！！！
发给小弟的信箱 7906471@qq.com
拜托各位大大了，我定会加分，700分以内，要多少都可以 拜托拜托拜托
会的那位大哥你加下我的QQ 7906471 我在这里有些地方不会 可以帮我下吗 我奉献700分！全部家当！！
小弟也是初来乍到，分并不是非常多 拜托啦！ 展开
就是类似播放器缓冲读取的效果，读取速度很快，从%0-%100
读取完成后，弹出一个对话框。。
最好能用HTML的语法实现，小弟不懂其它语法！！
如果是其它语法，可以帮小弟写好现成的嘛！！！
发给小弟的信箱 7906471@qq.com
拜托各位大大了，我定会加分，700分以内，要多少都可以 拜托拜托拜托
会的那位大哥你加下我的QQ 7906471 我在这里有些地方不会 可以帮我下吗 我奉献700分！全部家当！！
小弟也是初来乍到，分并不是非常多 拜托啦！ 展开
2个回答
展开全部
<!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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
深圳市容大彩晶科技有限公司
2024-11-15 广告
广告机代理优选容大彩晶，深圳市容大彩晶科技有限公司自2007年成立伊始，一直专注于液晶商用显示产品的技术研发及产品服务。公司依托具有自主研发能力、创新高效的技术团队，打造出行业优质商用液晶显示设备。容大彩晶产品涵盖商用液晶显示、多媒体广告机...
点击进入详情页
本回答由深圳市容大彩晶科技有限公司提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
