进度条制作-百分比形式

分手后的思念是犯贱 2021-09-16 21:44 509阅读 0赞

### 百分比形式进度条 ###

#### 1、思路分析 ####

*  首先，获取页面中的所有  img 标签，并进行遍历，对  img  标签的  src 属性赋值。
 *  根据遍历的图片的数量，计算对应的百分比，改变  span  标签中的数字。
 *  当遍历全部之后，隐藏对应的标签。

--------------------

#### 二、JS代码（关键） ####

$(function() { 
    	var img = $("img");
    	var num = 0;
    	img.each(function(i) { 
    		var oImg = new Image();
    		oImg.onload = function() { 
    			oImg.onload = null;
    			num++;
    			var persentNum = parseInt(num / $("img").length * 100)
    			$(".loading b").html(persentNum + "%");
    			if (num >= i) { 
    				$(".loading").fadeOut();
    			}
    		}
    		oImg.src = img[i].src;
    	})
    })

--------------------

#### 三、HTML代码 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>进度条制作</title>
    		<link rel="stylesheet" type="text/css" href="css/index4.css" />
    		<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div class="loading">
    			<div class="picture">
    				<span></span>
    				<b>0%</b>
    			</div>
    		</div>
    		<div class="container">
    			<div class="item">
    				<img src="http://pic1.win4000.com/wallpaper/2018-01-06/5a50674a7b626.jpg">
    			</div>
    			<div class="item">
    				<img src="http://pic1.win4000.com/wallpaper/2018-06-08/5b1a448a79175.jpg">
    			</div>
    			<div class="item">
    				<img src="http://www.wallcoo.com/flower/digital_flower_jp_03/wallpapers/1680x1050/wallcoo.com_Digital_Flower_Photo_321.jpg">
    			</div>
    			<div class="item">
    				<img src="http://www.wallcoo.com/nature/2009_Landscape_1680_Desktop_04/wallpapers/1680x1050/Rising%20Mist%20at%20Dawn.jpg">
    			</div>
    			<div class="item">
    				<img src="http://www.wallcoo.com/photograph/Fresh%20Vegetables%20by%20Isabelle%20Rozenbaum/wallpapers/1440x900/Bunch%20of%20radishes%2C%20close-up.jpg">
    			</div>
    			<div class="item">
    				<img src="http://img2.niutuku.com/desk/1208/2044/ntk-2044-14905.jpg">
    			</div>
    			<div class="item">
    				<img src="http://www.wallcoo.com/cartoon/Semafore_Calendar_Project_1920/wallpapers/1280x800/Calendar_Design_2003.04.jpg">
    			</div>
    			<div class="item">
    				<img src="http://www.wallcoo.com/cartoon/future_tech_background/wallpapers/1680x1050/%5Bwallcoo_com%5D_3516_future_TECH_Image.jpg">
    			</div>
    			<div class="item">
    				<img src="http://i1.3conline.com/images/piclib/201305/20/batch/1/176010/13690210721960gaa56pug9.jpg">
    			</div>
    			<div class="item">
    				<img src="http://img2.niutuku.com/desk/1207/1030/ntk119230.jpg">
    			</div>
    			<div class="item">
    				<img src="http://img2.niutuku.com/desk/1207/1041/ntk120340.jpg">
    			</div>
    			<div class="item">
    				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541335588899&di=d100aadf6f71aedb63a716d11d1644e5&imgtype=0&src=http%3A%2F%2Fimg3.iqilu.com%2Fdata%2Fattachment%2Fforum%2F201308%2F22%2F173304n1uctpp6htpt1hb8.jpg">
    			</div>
    			<div class="item">
    				<img src="http://pic1.win4000.com/wallpaper/3/510b709821ec1.jpg">
    			</div>
    			<div class="item">
    				<img src="http://download.firefox.com.cn/gfox/wallpaper/2013/06/1920x1200.jpg">
    			</div>
    			<div class="item">
    				<img src="http://pic1.win4000.com/wallpaper/a/51f1e196b5576.jpg">
    			</div>
    			<div class="item">
    				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541335077849&di=a8aaf9a754368763358798c118d26c97&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F5878387f6e1c9.jpg">
    			</div>
    		</div>
    	</body>
    </html>
    <script src="js/index4.js" type="text/javascript" charset="utf-8"></script>

--------------------

#### 四、CSS文件 ####

@charset "utf-8";
    
    * { 
    	margin: 0;
    	padding: 0;
    }
    
    .loading .picture { 
    	width: 100px;
    	height: 100px;
    	position: absolute;
    	left: 0;
    	bottom: 0;
    	top: 0;
    	right: 0;
    	margin: auto;
    	font-size: 30px;
    	text-align: center;
    	line-height: 100px;
    }
    
    .loading .picture span { 
    	display: block;
    	width: 80px;
    	height: 80px;
    	position: absolute;
    	top: 10px;
    	left: 10px;
    	border-radius: 50%;
    	box-shadow: 0 3px 0 #666;
    	animation: loading 1s infinite linear;
    }
    
    @keyframes loading { 
    	from { 
    		transform: rotate(0deg);
    	}
    
    	to { 
    		transform: rotate(360deg);
    	}
    }
    
    /* 页面样式start */
    .container { 
    	width: 1200px;
    	margin: 100px auto;
    	border: 1px solid red;
    	padding: 20px;
    	overflow: hidden;
    	border-radius: 10px;
    }
    
    .container .item { 
    	float: left;
    	margin-bottom: 10px;
    }
    
    .container img { 
    	font-size: 0;
    	vertical-align: middle;
    	width: 300px;
    	height: 200px;
    }

--------------------

#### 五、效果图 ####

![百分比形式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/2f57ba8e733e4bd8b9972d72aacf1564.png