zoukankan
html css js c++ java
javascript+css Loading效果
<
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
>
查看全文
相关阅读:
ios---图片缩放
ios---清除缓存
ReactNative---组件种类
Linux 用户和用户组管理
Linux 文件与目录管理
linux文件的基本属性
xshell 快速复制打开之前用过的ssh
ll 和 ls -l的详解
laravel rbac的用户 角色 权限的crud
laravel 中的rbac自己简单的实现
原文地址:https://www.cnblogs.com/craig/p/1205800.html
最新文章
POJ1995:Raising Modulo Numbers
排序小结
Codeforces 670C Cinema
数论与数学专题练习(一)(201802~201805)
BZOJ 2956 模积和 (数学推导+数论分块)
NOIP2017总结与反思
BZOJ 1101 Luogu P3455 POI 2007 Zap (莫比乌斯反演+数论分块)
BZOJ 3119 Book (贪心+数学推导)
HDU 2795 Billboard (线段树+贪心)
Luogu P1198 BZOJ 1012 最大数 (线段树)
热门文章
【学习笔记】线段树的数组大小下限及证明
POJ 2352 Stars (线段树)
BZOJ 2456 mode
数据结构与算法 --- js描述集合
js---描述链表
数据结构与算法 --- js描述队列
数据结构与算法 --- js描述栈
ios---CoreLocation框架实现定位功能
ios---photo实现保存图片到自定义相册
ios---选择多张图片
Copyright © 2011-2022 走看看