<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>进度条</title>
	<meta name="generator" content="editplus" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<style type="text/css">
	
	</style>
</head>
<body>
	<div id="load" onclick="clearInterval(handle);"><div id="loading"><div id="loadtext1">已完成 0%</div></div><div id="loadtext">已完成 0%</div></div>
</body>
</html>
<script>
	var loading = document.getElementById("loading");
	var text1=document.getElementById("loadtext1");
	var text2 = document.getElementById("loadtext");
	var width = 0;
	var handle = setInterval(function(){
	loading.style.width = ++width +'%';
	text1.innerHTML = "已完成" + width + '%';
	if(width > 80)
		text2.innerHTML = "";
	else
		text2.innerHTML = "已完成" + width + '%';
	if(width > 100)
		{
			
			text1.innerHTML = "完成";
		}
	},100);
	setTimeout("clearInterval(handle)",11000);

</script>

提示：您可以先修改部分代码再运行

使用道具举报

hgrhgy　

一抹红尘

7 主题	18 好友	1247 积分

银牌会员

帖子: 365
威望: 0
居住地: 辽宁省沈阳市
注册时间: 2008-11-16

发消息

发表于 2010-6-26 17:11:07 |显示全部楼层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>进度条</title>
	<meta name="generator" content="editplus" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<style type="text/css">
	
	</style>
</head>
<body>
	<div id="load" onclick="clearInterval(handle);"><div id="loading"><div id="loadtext1">已完成 0%</div></div><div id="loadtext">已完成 0%</div></div>
</body>
</html>
<script>
	var loading = document.getElementById("loading");
	var text1=document.getElementById("loadtext1");
	var text2 = document.getElementById("loadtext");
	var width1 = 0;
	var width2 = 100;
	var handle = setInterval(function(){
	loading.style.width = ++width1 +'%';
	text2.style.width = --width2 + '%';
	text1.innerHTML = "已完成"+width1+"%";
	text2.innerHTML = "已完成"+width1+"%";
	if(width > 99)
		{
			
			text1.innerHTML = "完成";
		}
	},100);
	setTimeout("clearInterval(handle)",10100);

</script>

提示：您可以先修改部分代码再运行

这个效果好一些。。

使用道具举报

SenFe　楼主

盛飞

79 主题	71 好友	1万积分

钻石会员

帖子: 6299
威望: 14
居住地: 四川省成都市
注册时间: 2005-12-10

发消息

发表于 2010-6-27 11:44:44 |显示全部楼层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>进度条</title>
	<meta name="generator" content="editplus" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<style type="text/css">
	
	</style>
	<script type="text/javascript">
	//<![data[
		//获取对象属性兼容方法
		 function $(objectId) {
			if(document.getElementById && document.getElementById(objectId)) {
			// W3C DOM
			return document.getElementById(objectId);
			} else if (document.all && document.all(objectId)) {
			// MSIE 4 DOM
			return document.all(objectId);
			} else if (document.layers && document.layers[objectId]) {
			// NN 4 DOM.. note: this won't find nested layers
			return document.layers[objectId];
			} else {
			return false;
			}
		}
	//]]-->
	</script>
</head>
<body>
	<div id="load"><div id="loading"></div><div id="loadtext"></div><div id="loadtext1"></div></div>
	<script type="text/javascript">
	//<![data[
		var i=1;
		var w;
		function test(){
			i++;
			w = (498*i/100-200);
			$("loading").style.width = i + "%";
			$("loadtext").style.width = w<0?0:w + "px";
			$("loadtext").innerHTML = $("loadtext1").innerHTML = i==100?"完成":"已完成" + i + "%";
			if(i<100)setTimeout("test()",100);
		}
		test();
	//]]-->
	</script>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 SenFe 于 2010-6-27 11:49 编辑 ]

承接程序定制、修改。

使用道具举报