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
>
查看全文
相关阅读:
redis 设置分布式锁要避免死锁
jmeter的简单http接口用法
整理一些好的网站或者好的文章来慢慢学
多线程的共享变量的内存不可见性如何理解
谷歌浏览器可以google了
org.apache.commons.dbcp.DelegatingPreparedStatement.isClosed()Z和NewProxyPreparedStatement.isClosed()
php封装curl,模拟POST和GET请求HTTPS请求
PHP 轻量级 REST框架
使用 spring封装的javamail linux服务器发送邮件失败解决
安装Ruby、Sass在WebStrom配置Scss编译环境css自动压缩
原文地址:https://www.cnblogs.com/craig/p/1205800.html
最新文章
Tornado 高并发源码分析之六---异步编程的几种实现方式
Tornado 高并发源码分析之三--- Application 对象
Tornado 高并发源码分析之一---启动一个web服务
ubuntu12 安装redis和phpRedisAdmin详细流程
ubuntu12上部署Django1.8.4+uwsgi+nginx超级详细流程配置到云服务器
hicoder1142 三分求极值
bzoj1483 [HNOI2009]梦幻布丁
Codeforces 830C On the Bench
bzoj 3884 上帝与集合的正确用法
HDU 4556 Stern-Brocot Tree
热门文章
Stern-Brocot Tree
CS Round#53 E Maxor
CS Round#53 C Histogram Partition
Codevs3945 完美拓印
bzoj4974 字符串大师
interrupt 停止线程
mysql 数据库 创建用户和授权
http协议和网络模型
JVM 的内存布局
mysql的innodb 引擎 表锁与行锁
Copyright © 2011-2022 走看看