js做进度条

最新推荐文章于 2024-08-02 18:20:19 发布

会飞得猪

最新推荐文章于 2024-08-02 18:20:19 发布

阅读量909

点赞数

文章标签： js 进度条

本文链接：https://blog.csdn.net/wuwenjie_1997/article/details/89357718

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#asd{
				width: 400px;
				height: 50px;
				/*margin-left:100px ;
				margin-top: 200px;*/
				border:1px solid black;
				float: left;
			}
			#jindutiao{
				width: 0;
				height: 100%;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="asd">
			<div id="jindutiao"></div>
		</div>
		<span id="bai" style="display: block;">0%</span>
		<input type="button" id="go" value="加载" "ruo()">
	</body>
</html>
<script type="text/javascript">

	//点击运行
	function ruo(){
		//进度条初始值为0
		var	width=0;
//		每隔10毫秒加4px也就是百分之一;
		var timing = setInterval(function(){
			width=width+4;
			//percent百分比
			var percent = parseInt(width/400*100);
			//判断 进度条是否已满
			if(width>=400){
				width=400;
				window.clearInterval(timing)
			}	
//			过程中的实时进度
			$("jindutiao").style.width = width+"px";
			$("bai").innerHTML = percent+"%"
			
		},40)
	}	
	//调用函数
	function $(id){
		return document.getElementById(id)
	}
</script>

会飞得猪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js做进度条

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #asd{ width...
复制链接

扫一扫