zoukankan      html  css  js  c++  java
  • 像进度条的网页加载Loading JS代码

    <html>
    <head>
    <title>程序加载页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head>
    <body style="background:black">
    <div id="div1" style="position:absolute;322;height:14;border:1 #707888 solid;overflow:hidden">
     <div style="position:absolute;top:-1;left:0" id="pimg">
     </div>
    </div>
    <div id="div2" style="position:absolute;top:30;left:120;font-size:9pt;color:#f4f4f4">
    正在加载中......
    </div>
    <script language="JavaScript">
    s=new Array("#050626","#0a0b44","#0f1165","#1a1d95","#1c1fa7","#1c20c8","#060cff");
    //s=new Array("#333333","#555555","#777777","#999999","#AAAAAA","#CCCCCC","#EEEEEE");
    div1.style.posTop=Math.floor((document.body.clientHeight-14)/2);
    div1.style.posLeft=Math.floor((document.body.clientWidth-322)/2);
    div2.style.posTop=parseInt(div1.style.posTop)+20;
    div2.style.posLeft=parseInt(div1.style.posLeft)+120;
    function Larrange(){
     pimg.innerHTML="";
     for(i=0;i<9;i++){
      pimg.innerHTML+="<input style="15;height:10;border:0;background:"+s[i]+";margin:1">";
     }
    }
    function Rarrange(){
     pimg.innerHTML="";
     for(i=9;i>-1;i--){
      pimg.innerHTML+="<input style="15;height:10;border:0;background:"+s[i]+";margin:1">";
     }
    }
    var is=0;size=0;
    function move(){
     if(pimg.style.pixelLeft<350&&is==0){
      if(size==0){Larrange();size=1;}
      pimg.style.pixelLeft+=3;
      setTimeout("move()",1);
      return;
     }
     is=1;
     if(pimg.style.pixelLeft>-200&&is==1){
      if(size==1){Rarrange();size=0;}
      pimg.style.pixelLeft-=3;
      setTimeout("move()",1);
      return;
     }
     is=0;
     move();
    }
    function flashs(){
     if(div2.style.color=="#ffffff"){
      div2.style.color="#707888";
      setTimeout('flashs()',500);
     }
     else{
      div2.style.color="#ffffff";
      setTimeout('flashs()',500);
     }
    }
    Larrange();
    flashs();
    move();
    </script>
    </body>
    </html>

  • 相关阅读:
    Android学习路径(两)项目文件本身使用场景和文件演示
    A左右ndroid正在使用Uri监视数据库中的更改
    离PACKET_INp获取信息acket data
    curl 命令
    POJ 3177 Redundant Paths POJ 3352 Road Construction(双连接)
    Linux 下一个 Mysql error 2002 错误解决
    图片打水印 缩放 和一个输入流的转换
    qt Qt5开发
    qt 关于Qt中MVC的介绍与使用
    qt mvc3
  • 原文地址:https://www.cnblogs.com/softmans/p/7485178.html
Copyright © 2011-2022 走看看