做网页如何做出进度条,类似播放器缓冲读取的效果。(高分高分)
发布网友
发布时间：2022-04-19 22:53
共2个回答
热心网友
时间：2022-04-20 00:22
<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>
热心网友
时间：2022-04-20 01:40
