当前位置：首页 » 编程语言 » 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加载进度条相关的阅读推荐