php+js进度读取条

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
div{ font-size: 9pt}
#load{font-size: 9pt; cursor: default; position: absolute; display:block;width:402;height:20;top:expression((document.body.clientHeight-50)/2);left:expression((screen.width-400)/2); display: block; z-index:100;background:#EDECE9}
.px1{border: 1px solid ;background-color: #FFFFFF;}
body {
    background-color:#000000;
}
.style1 {color: #FFFF00}
-->
</style>
<script language=JavaScript>
    var load_line_i=1;
    var load_line_step=10000;
    function load_num(txt){
        load_line_i+=400/load_line_step;
        load_txt.innerText=txt+" "+Math.floor(load_line_i/4.00)+"%";
        document.all("line").width=load_line_i;}
    function finish(){
        window.location.href="index.php";
    }
</script>
</head>
<body onload=finish()>
<div id=load style="background-color:#000000"><span class="style1">请稍候...</span>
    <div class=px1><img  id=line style="background:red" width=14 height=14></div>
    <div class="style1" id=load_txt>loading</div>
</div>
<?php 
for($i=0;$i<10000;$i++){
?>
<script>load_num("Loading");</script>
<?php
}
?>
</body>
</html>
z-index是z轴属性,就垂直屏幕向外的轴,这个数字越大显示的越开外层,
cursor是控制鼠标样式的,可以有需要样式,default是默认光标(通常是一个箭头)
top:expression((document.body.clientHeight-50)/2这是一个仿js的写法,一般正规的css里面不常见,都用js去实现了。它的意思是绝对定位距离头部的高度是 浏览器的高度减去50像素再除以二。
如果浏览器高1050像素,即top:(1050-50)/2=500px
posted @ 2016-11-14 20:14  鹏飞10000  阅读(694)  评论(0编辑  收藏  举报