-
javascript+css Loading效果
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style>![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
html {
}{ BACKGROUND: #FFFFFF; }
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
body {
}{ MARGIN: 0px; }
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
form {
}{ MARGIN: 0px; }
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
img {
}{ BORDER: 0px; }
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
div, table, input, button, select, textarea {
}{ FONT-FAMILY: Tahoma; FONT-SIZE: 12px; COLOR: #222222; }
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.debug {
}{ BACKGROUND: #FFFFFF; WIDTH: 360px; BORDER: #000000 1px solid; TEXT-ALIGN: center; }
</style>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script>![](https://www.cnblogs.com/Images/dot.gif)
var i=0;
var n=0;
var url='<a href="http://www.cssrain.cn" target="_blank">http://www.cssrain.cn</a>'; //转
var min = '10'; //进度速度
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function loading()
{
var l='320'; //总长度 该了 div 也要改
var t='40'; //进度条长度
var h='20'; //进度条高度度
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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;"/>';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<body>
<div style="POSITION: absolute; TOP: 0px; LEFT: 0px;" id="debug"></div>
<button onclick="debug();">提交</button>
</body>
</html>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
-
相关阅读:
BeautifulSoup的基本用法
打印实例
webservice和一般处理程序
C# 后台调用存储过程
表格增加删除
asp.net C# 获得配置文件AppSettings 的值
深入浅出zookeeper(一)
resource下的excel文件下载被损害
csdn添加目录
spring面试题,求求你别问我spring了!
-
原文地址:https://www.cnblogs.com/craig/p/1205800.html
Copyright © 2020-2023
润新知