网页加载进度条实现

需积分: 9 66 浏览量更新于2024-09-16 收藏 1KB TXT 举报

本文档涉及到的是网页开发中的一个常见元素——加载效果（Loading Effect）。在HTML结构中，开发者利用JavaScript实现了一个简单的百分比进度条动画，以向用户展示数据加载过程。以下是对这段代码的详细解析： 1. **HTML结构**: 开头的`<html>`标签标志着这是一个标准的HTML5文档结构，后续的`<head>`部分包含页面标题（虽然在这里是空的，`<title></title>`）和字符编码设置(`<meta http-equiv="Content-Type" content="text/html;charset=gb2312">`)，确保了页面以GB2312字符集显示。 2. **表格布局**: `<table>`标签用于创建一个100%宽度且占据整个屏幕的表格，`border=0`, `cellpadding=0`, 和 `cellspacing=0` 控制了边距和间距，使整个加载界面简洁无框。 3. **表单元素**: `<form name="loading">`定义了一个名为"loading"的表单，其中包括两个文本输入框： - `<input type="text" name="chartsize" ...>`: 一个用于显示加载进度条的数字，初始值为"|"，用户看不到。 - `<input type="text" name="percentsize" ...>`: 显示当前进度的百分比，同样初始值也为"|"。 4. **JavaScript 动画函数**: JavaScript代码是实现加载效果的关键部分。`count()`函数通过递归调用自身，每100毫秒增加`bar`变量的值（模拟进度），并更新`chartsize`的显示。`line`变量用于生成进度条的分割线，`amount`用于累计所有进度条的字符。当`bar`达到99时，跳转到`http://www.lanrentuku.com/`，这可能是一个预设的加载完成后的页面链接。 5. **文本样式**: 通过CSS设置了文本的颜色、字体家族（Arial）、加粗和内边距，使得加载信息易于阅读。这个加载效果非常基础，通常在网页设计中用于向用户传达数据加载状态，提升用户体验。实际应用中，开发者可能会根据需求添加更丰富的视觉反馈，如圆环、线性进度条、动画图标等，以提供更加直观的体验。同时，现代Web开发中，这类功能也可以通过Ajax异步加载或者Web组件库（如React、Vue等）的动态加载组件来实现。

<html>
<head>
<title>正在载入...</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr>
<form name=loading>
<td align=center>
<p><font color=gray>正在载入首页，请稍候.......</font></p>
<p>
<input type=text name=chart size=46 style="font-family:Arial;
font-weight:bolder; color:gray;
background-color:white; padding:0px; border-style:none;">
<br>
<input type=text name=percent size=46 style="font-family:Arial;
color:gray; 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()",100);}

下载后可阅读完整内容，剩余1页未读，立即下载

dosir2009

粉丝: 0
资源: 4

网页加载进度条实现

vuerouter切换时loading效果实现

swing 鼠标事件 loading效果

页面加载的Loading效果

loading效果

javascript制作loading动画效果 loading效果

loading效果 flash

常用loading效果

加载loading效果

页面Loading效果

WPF Loading 效果

最新资源