進度條製作-百分比形式

阿新 • • 發佈：2018-11-15

百分比形式進度條

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

五、效果圖

百分比形式

進度條製作-百分比形式

百分比形式進度條 1、思路分析首先，獲取頁面中的所有 img 標籤，並進行遍歷，對 img 標籤的 src 屬性賦值。根據遍歷的圖片的數量，計算對應的百分比，改變 span 標籤中的數字。當遍歷全部之後，隱藏對應的標籤。二、

進度條製作-固定在頂部

進度條製作一、思路分析對於固定在頂部的 loading 動畫，我們採用的方式動態改變標籤的寬度來實現動畫效果，在頁面載入一部分後，改變寬度，當載入完畢時，隱藏對應的標籤。二、頁面佈局 <!DOCTYPE html> <html>

進度條製作-CSS動畫

溫馨提示程式碼參考 [本人部落格]：【https://blog.csdn.net/qq_41115965/article/details/83713343】程式碼修改不同於使用 GIF 圖片，使用 CSS3 動畫的時候 loading 佈局，應做以下改變:

進度條製作-GIF動畫

網頁進度條製作一、為什麼需要網頁進度條隨著HTML的普及，各種CSS3動畫及特效在網頁中層出不窮，PC端載入資料的速度還算可以，移動端相對要慢很多，如果圖片或指令碼沒有完全載入，使用者在操作中可能發生各種問題，因此我們需要對載入資料進行檢測，以更加人性化的方式給使用者展現。

Canvas實現多個圓形進度條顯示百分比，並繫結各自的click事件

Canvas實現多個圓形進度條顯示百分比，並繫結各自的click事件目錄 Canvas實現多個圓形進度條顯示百分比並繫結各自的click事件目錄實現效果製

進度條製作

簡單描述一下小例子：這個進度條是可以通過js控制的，即點選按鈕觸發函式，動態的改變百分比的值與進度條的狀態。當超過100%時，不再響應，按鈕禁用。 html部分： <div class="progress-bar"> <div class='bo

Unity3D非同步載入的進度條製作

Unity3D非同步載入場景的場景進度條的製作 01.菜鳥一些 using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.

NGUI 圓形血條、進度條製作

通常，為了美化介面佈局，進度條或者角色血條、經驗條並不是長方形的，可能會是個圓形，看了下別人的製作過程都稍顯複雜，為此整理了一份步驟非常簡單的製作圓形進度條或者圓形血條、經驗條的方法。這兒我們使用了一個遮罩 Shader，原文連結地址如下：http://gam

多執行緒斷點續傳顯示進度條和百分比

簡介複製即可用使用簡單這是一個簡單使用的支援暫停和繼續多執行緒下載顯示進度條和百分比進度的多首先新增依賴 compile 'com.loopj.android:android-async-http:1.4.9' 許可權記得如果是模擬器的話

純CSS3進度條製作-Pure CSS3 Progress Bar

1.效果分析純CSS3實現進度條的製作，效果如下圖所示，詳見----demo---- 2.難點分析圓角邊框，內陰影，漸變填充實現斜紋效果斜紋動畫 3.實現步驟 a.html架構 <d

QT進度條根據百分比顯示不同顏色

引用 4 樓 ak47zhangzhiwei 的回覆:使用Qt 的styleSheet 可以實現：用於計算比例：C/C++ codeQString CMainWidget::calcValue(int nValue,int nTotal){ QString strStyle = ""; int v

下載進度條加百分比

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="h

svg製作圓圈百分比資料-進度條

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device

HTML5圓形百分比進度條插件circleChart(記錄)

orm syn math unit 配置參數頁面進度條使用方法 dom 介紹:一款可以描繪圓圈進度條的jQuery插件(可用作統計圖) circleChart使用方法在頁面中引入jquery和circleChart.min.js文件。 <script s

圖解CSS3製作圓環形進度條的例項教程

圓環形進度條製作的基本思想還是畫出基本的弧線圖形,然後CSS3中我們可以控制其旋轉來串聯基本圖形,製造出部分消失的效果,下面就來帶大家學習圖解CSS3製作圓環形進度條的例項教程首先，當有人說你能不能做一個圓形進度條效果出來時，如果是靜態完整圓形進度條，那麼就很簡單

詳解用CSS3製作圓形滾動進度條的動畫效果

今天手把手教大家用CSS3製作圓形滾動進度條動畫！先看一下效果圖，會提升我們的學習興趣喲：第一種效果： html結構： <div id="progress"> <span></span> </div>

Java製作進度條

import java.awt.Color; import java.awt.Toolkit; import javax.swing.ImageIcon; import javax.swing.JLabel; import javax.swing.JOptionPane; import javax.

vue自定義進度條的製作方法（含css屬性值的兩種動態改變方式）

雛形部分接上一篇文章：https://blog.csdn.net/ColourfulTiger/article/details/82910505 結合vue製作自定義的進度條，優勢在於採用了vue特有的樣式繫結，與雙向繫結的方法，達到資料與進度條的進度一致。突破點：通過變數來動態改變屬性對

Python網路爬蟲之製作股票資料定向爬蟲以及爬取的優化可以顯示進度條！

候選網站：新浪股票：http://finance.sina.com.cn/stock/ 百度股票：https://gupiao.baidu.com/stock/ 選取原則：無robots協議非js網頁資料在HTMLK頁面中的 F12，檢視原始

Unity3D之UGUI——製作非同步載入場景進度條

製作遊戲經常要實現兩個場景的切換，但由於載入場景需要一定時間，所以為了優化玩家體驗，在第一個場景中製作一個進度條顯示載入進度。現在就在unity中實現，go go!開啟unity,新建場景 GameMai

進度條製作-百分比形式

百分比形式進度條

1、思路分析

二、JS程式碼（關鍵）

三、HTML程式碼

四、CSS檔案

五、效果圖

相關推薦