當前位置：首頁 » 編程語言 » html載入進度條

html載入進度條

發布時間: 2021-03-21 03:19:59

A. 如何製作網頁載入的進度條

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Loading</title>
</head>

<body>

<form name="loading">

<p align="center">正在跳轉，請稍後...</p>

<p align="center">
<input type="text" name="bar" style="border-style:none; background-color:#D3E8D0; font-weight:bold" />
<input type="text" name="percentage"style="border-style:none; background-color:#FFFFFF; max-width:30px"/>
</p>

<p align="center">
如果您的瀏覽器不支持跳轉，請點擊<a href="http://www.126.com">這里</a>手動跳轉
</p>

<script language="javascript" type="text/javascript">
var percent=0; //百分比進度，顯示在滾動條後面
var element="||"; //滾動條單元豎線
var elements="||"; //滾動條當前豎線
count(); //開始調用循環

function count(){
percent=percent+10; //每次百分比加10
elements =elements + element; //滾動條當前豎線增加一個滾動條單元豎線
document.loading.bar.value=elements; //設置窗體loading表單中bar元素的當前值
document.loading.percentage.value=percent+"%"; //設置窗體loading表單中percentage元素的當前值
if (percent<99){ //percent小於99則繼續循環
setTimeout("count()",500); //每500ms進行一次count()
}
else{
window.location = "http://www.126.com"; //percent達到100時跳轉
}
}
</script>

</form>
</body>
</html>

B. HTML如何做出這種效果的進度條

我這個做法用的jQuery

span{display:inline-block;*display:inline-block;zoom:1;}
.bg{width:300px;height:20px;border-radius:10px;background:#3D3C3A;}
.main{height:20px;border-radius:10px;background:#55404C;}

<spanclass="bg">
<spanclass="main"></span>
</span>
<spanclass="num">70%</span>

$(function(){
var_width=$('.num').text();//獲取百分比數值
$('.main').css('width',_width);//將數值賦值給main的width
});

C. 這個html網頁跳轉帶有進度條的跳轉代碼怎麼做

可以用html5實現，也可以做成gif的圖片，你只需要設置為和你程序設置一樣的時間然後進度條自專動結束就好了。用圖片是屬最好實現，用ps軟體就可以製作。

這個的實現，有很多中方法，簡單的，是使用 DIV 嵌套，例如：

<div style="width: 100px; height: 10px; border: solid 1px #ccc;text-align: left">
<div style="width: 64px;height: 8px;background-color: #abc000"></div>
</div>

100px 代表 100 分， 64px 代表實際的得分

該進度條是100毫秒，+ 1% ，10秒鍾後，跳轉頁面！要改時間的話！改100就好了

D. html5怎麼控制進度條

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Inserttitlehere</title>
</head>
<style>
	.jdtbox{
		:10px0;
	}
	
	.jdt_dbg{
		background:#fce5e5;
		width:196px;
		height:18px;
		border-radius:10px;
		-webkit-border-radius:10px;
		overflow:hidden;
		border-top:1pxsolid#f9d1d1;
	}
	
	.jdt_mbg{
		background:#f12938;
		height:18px;
		width:75%;
		height:20px;
	}
</style>
<scripttype="text/javascript">
	$(function(){
		$(".jdt_mbg").animate({
			width:"50%",
		},1000);
	});
</script>
<body>
	<formaction="http://192.168.1.106:8080/app/img/multiUpload"method="post"enctype="multipart/form-data"name="upload_form">
		<label>選擇圖片文件</label>
		<inputname="imgFile"type="file"multiple="multiple"accept="image/gif,image/jpeg"/>
		<inputname="upload"type="submit"value="上傳"/>
	</form>
	<divclass="jdtbox">
		<divclass="jdt_dbg">
			<divclass="jdt_mbg"style="width:${investDetail.percent*100"></div>
		</div>
	</div>
</body>
</html>

E. html 下圖進度條怎麼實現

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery實現進度條</title>
<style>
.progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
#bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}
</style>
<script type="text/jscript" src="jquery.min.js"></script>
<script type="text/javascript">
function progressBar(){
//初始化js進度條
$("#bar").css("width","0px");
//進度條的速度，越小越快
var speed = 20;
bar = setInterval(function(){
nowWidth = parseInt($("#bar").width());
//寬度要不能大於進度條的總寬度
if(nowWidth<=200){
barWidth = (nowWidth + 1)+"px";
$("#bar").css("width",barWidth);
}else{
//進度條讀滿後，停止
clearInterval(bar);
}
},speed);
}
</script>
</head>
<body>
<input type="button" value="開始" onclick="progressBar()" />
<div class="progressBar"><div id="bar"></div></div>
</body>
</html>

F. html添加 javascript進度條

看你這代碼真夠無聊的。。嘿嘿我幫你寫這代碼更無聊。。（早飯午飯都沒吃餓的是在沒心情工作了。。。就當KILL TIME吧）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.holder{
position:absolute; border:solid #FF0000 1px; height:20px;
}
div .bar {
background-color:#003300; height:20px;
}
</style>
<script>

function confirmDialog(){
if(window.confirm("請評良心選擇，是請選擇'確定',不是'取消'"))

alert("果然群眾眼睛是雪亮的！");
else
new ProgressBar();
}
function ProgressBar () {
this.holder = document.createElement('div');
this.bar = document.createElement('div');

this.holder.appendChild(this.bar);

this.holder.className = 'holder';
this.bar.className = 'bar';

this.bar.style.width = '0px';
this.holder.style.width = '100px';

var that = this;

this.show = function () {
var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth; var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
this.holder.style.top = h/2 + 'px';
this.holder.style.left = w/2 + 'px';
document.body.appendChild(this.holder);
this.timer = setInterval(this.grow, 100);
};
this.grow = function () {

var barWidth = parseInt(that.bar.style.width);
var holderWidth = parseInt(that.holder.style.width);

barWidth += 10;
barWidth = Math.min(barWidth, holderWidth);

that.bar.style.width = barWidth + 'px';
if (barWidth === holderWidth) {
clearInterval(that.timer);
document.body.removeChild(that.holder);
that.onEnd();
}
};
this.onEnd = function () {
alert("木馬釋放注入成功！！");
}
this.show();
}

</script>
</head>

<body>
<form>
<input type="button" value="小楠是宇宙第一帥哥么？" onclick="confirmDialog()">
</form>

</body>
</html>
（不用架框寫起來好麻煩。。不過超簡單就沒加註釋多瀏覽器下測試通過了）

G. html 怎麼做出這種進度條一樣的或者讓range實時顯示值也可以啊

獲取range的值就行了，然後將其顯示出來，你實時改變range的值，顯示的就會實時改變

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<inputid="range"type="range"min="0"max="50000"value="5"step="10"oninput="change()"onchange="change()">
<spanid="value">0</span>
<scripttype='text/javascript'>
functionchange(){
varvalue=document.getElementById('range').value;
document.getElementById('value').innerHTML=value;
}
</script>

</body>
</html>

H. 如何用html5在網頁上設置進度條

首先，我們製作的這個進度條並沒有後台數據作為支撐，所以是一個靠js實現的一個簡單的頁面。

我們首先需要新建一個html5的頁面，其使用的progress元素實在html5時代才出現的。

我們在新建的頁面中，輸入一個段落標簽，一個進度條，一個button按鈕。

然後，我們需要設置一下進度條顯示的進度。value代表從多少開始，max代表到多少結束。我們做的是百分比形式的，應該寫成這樣的。

這些做好之後，我們需要書寫兩個小的事件，實現原理大體上是滑鼠單擊下載按鈕，開始下載變為正在下載百分之多少，等到達到我們預設的時間後顯示下載完成。

我們之前已經給p標簽和progress標簽分別賦予了不同的id，我們需要獲取到這兩個元素，並將他們賦給兩個變數。

我們還要將progress的初始值設為0,當滑鼠單擊的時候，我們以一定的時間為周期調用寫好的事件。

函數寫好之後，我們在瀏覽器中調試，點擊下載按鈕之後會在300ms內完成下載時間。

閱讀全文

html載入進度條

與html載入進度條相關的閱讀推薦