1. 程式人生 > >進度條製作-百分比形式

進度條製作-百分比形式

百分比形式進度條

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;
}

五、效果圖

百分比形式