js写的进度条

最新推荐文章于 2024-10-02 17:15:49 发布

shdhenghao3

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量850

点赞数

本文链接：https://blog.csdn.net/shdhenghao3/article/details/8362736

版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#out{
	width:300px;height:20px;background:#EEE000;
}
#in{
	width:10px;height:20px;background:#0000ff;coloe:white;text-align:center;
}
</style>
</head>
<body οnlοad="start();">
<div id="out">
	<div id="in" style="width:10%">0%</div>
</div>
<script type="text/javascript">
	var i=0;
	function start(){
		ba=setInterval("begin()", 100);
	}
	function begin(){
		i+=1;
		if(i<=100){
			document.getElementById("in").style.width=i+"%";
			document.getElementById("in").innerHTML=i+"%";
		}else{
			clearInterval(ba);
			document.getElementById("out").style.display="none";
			document.write("进度条运行成功");
		}
	}
</script>
</body>
</html>