javascript进度条

最新推荐文章于 2025-08-09 20:51:19 发布

原创最新推荐文章于 2025-08-09 20:51:19 发布 · 982 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #border #function #input #table #html

本文介绍了一个使用HTML和JavaScript实现的页面加载效果示例。通过定时更新文本框中的进度条和百分比来模拟页面加载的过程。该示例适用于前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图：

<HTML>
<HEAD>
<TITLE>yaosansi</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
</HEAD>
<BODY BGCOLOR="#EAEAEA">

<form name=loading>
<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr>
   <TD align="center" valign="top">
   <p><FONT color="000000" face="Arial"><BR>
      页面载入中，请等待</FONT></p>
   <p><input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:black; background-color:#EAEAEA; padding:0px; border-style:none;">
<br>
<input type=text name=percent size=46 style="font-family:Arial; color:black; background-color:#EAEAEA;text-align:center; border-width:medium; border-style:none;">
<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()",200);}
else
{window.location = http://www.javazh.cn;;}
}
</script></p></TD>
</tr>
</table>
</FORM>
<</BODY>
</HTML>