简易的模拟进度条的JavaScript

最新推荐文章于 2025-05-25 14:20:28 发布

最新推荐文章于 2025-05-25 14:20:28 发布 · 147 阅读

文章标签：

#JavaScript #HTML #ViewUI

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个模拟加载进度条的功能。进度条通过逐步增加显示的字符数来模拟加载过程，并在达到指定百分比后跳转到百度网站。

[size=medium]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>模拟进度条</title>
<style type="text/css">
	.none {
		border-style:none;
		background-color:#fc3;
	}
</style>
</head>
<body>
	正在载入 请稍后.......
	<form name="loading">
		<input type="text" name="chart" size="40" class="none"><br/>
		<input type="text" name="percent" size="40" class="none">
<script type="text/javascript">
	var bar = 0;
	var line = "|";
	var account = "|";
	count();
	function count() {
		bar += 3;
		account = account + line;
		document.loading.chart.value = account;
		document.loading.percent.value = bar+"%";
		if(bar<98) {
			window.setTimeout("count()",100);
		} else {
			window.location = "http://www.baidu.com";
		}
	}
</script>
	</form>
</body>
</html>

[/size]