javascript+css ---Loading效果

最新推荐文章于 2024-12-04 11:40:26 发布

weixin_30348519

最新推荐文章于 2024-12-04 11:40:26 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/craig/archive/2008/05/23/1205800.html

本文介绍了一种使用HTML和JavaScript实现网页加载进度条的方法。通过动态改变进度条长度来显示加载进度，同时提供了完整的代码示例，便于读者理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>

html {

}{ BACKGROUND: #FFFFFF; }

body {

}{ MARGIN: 0px; }

form {

}{ MARGIN: 0px; }

img {

}{ BORDER: 0px; }

div, table, input, button, select, textarea {

}{ FONT-FAMILY: Tahoma; FONT-SIZE: 12px; COLOR: #222222; }

.debug {

}{ BACKGROUND: #FFFFFF; WIDTH: 360px; BORDER: #000000 1px solid; TEXT-ALIGN: center; }

</style>

<script>

var i=0;

var n=0;

var url='<a href="http://www.cssrain.cn" target="_blank">http://www.cssrain.cn</a>'; //转

var min = '10'; //进度速度

function loading()

{

var l='320'; //总长度该了 div 也要改

var t='40'; //进度条长度

var h='20'; //进度条高度度

if(i<l)

{ if(i>=l-t)

{ i<l ? i++ : i=1; n=l-i; } else

{ if(n>t) i<l ? i++ : i=1; else n++; } } else

{ i=0; n=0; location.href=url }

document.getElementById('loading').innerHTML='<div style="BACKGROUND: #A0E000; MARGIN-LEFT: '+i+'px; WIDTH: '+n+'px; HEIGHT: ' + h + 'px; OVERFLOW: hidden;"/>';

}

function debug()

{

var debug='<div style="BACKGROUND: #001000; WIDTH: 100%; HEIGHT: '+document.body.clientHeight+'px; FILTER: alpha(opacity=75);"></div>'+

'<div class="debug" style="POSITION: absolute; TOP: '+((document.body.clientHeight/2)-32)+'px; LEFT: '+((document.body.clientWidth/2)-180)+'px;">'+

'<div style="PADDING: 10px; FONT-WEIGHT: bold;">Loading..</div>'+

'<div id="loading" style="BACKGROUND: #EEEEEE; WIDTH: 320px; PADDING: 1px; BORDER: #AAAAAA 1px solid; TEXT-ALIGN: left;"></div>'+

'<div style="PADDING: 10px; TEXT-ALIGN: right;">正在处理你的请求,请不要刷新,请稍候..</div>'+

'</div>';

setInterval( 'loading()', min );

document.getElementById('debug').innerHTML = debug;

}

</script>

<body>

<div style="POSITION: absolute; TOP: 0px; LEFT: 0px;" id="debug"></div>

<button onclick="debug();">提交</button>

</body>

</html>

转载于:https://www.cnblogs.com/craig/archive/2008/05/23/1205800.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。