装载页面进度条（实用）

最新推荐文章于 2025-12-03 23:30:00 发布

原创最新推荐文章于 2025-12-03 23:30:00 发布 · 537 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #border #function #table #class #html

此博客展示了一个HTML页面的加载进度条示例。通过设置表格、输入框样式，利用JavaScript函数实现进度条动态加载效果，当加载完成后会弹出提示并跳转至指定网页。

<!--

.unnamed1 {　background-color: #000000}

-->

</style>

</head>

<body>

<tr>

　　　　<p>
　　　　　<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder;

color:#00FF00; background-color:black; padding:0px; border-style:none;">
　　　　　<br>
　　　　　<br>
　　　　　<input type=text name=percent size=46 style="font-family:Arial; color:#00FF00;

text-align:center; border-width:medium; border-style:none;" class="unnamed1">
　　　　　<br>
　　　　　<br>
　　　　　<font color="#00FF00" size="2" >
　　　　　<script>
var bar = 0

var line = "||"

var amount ="||"

count()

function count(){

bar= bar+2

amount =amount + line

document.loading.chart.value=amount

document.loading.percent.value=bar+"%"

if (bar<99)
{
setTimeout("count()",100);
}

else
{
alert("载入完毕")
window.location = "http://www.webjx.com";
}

}

</script>
　　　　　
　　　　　<noscript></noscript></font></p>
　　　　
　　　　　　　　　</td>