博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
像进度条的网页加载Loading JS代码
阅读量:5094 次
发布时间:2019-06-13

本文共 1765 字,大约阅读时间需要 5 分钟。

<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;width: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=\"width:15;height:10;border:0;background:"+s[i]+";margin:1\">";
 }
}
function Rarrange(){
 pimg.innerHTML="";
 for(i=9;i>-1;i--){
  pimg.innerHTML+="<input style=\"width: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>

转载于:https://www.cnblogs.com/softmans/p/7485178.html

你可能感兴趣的文章
SpringBoot+Angular2 开发环境搭建
查看>>
C++编程--类与继承(3)
查看>>
nvl()函数和nvl2()函数
查看>>
蓝桥杯入门(一)
查看>>
[BZOJ 3995] [SDOI2015] 道路修建 【线段树维护连通性】
查看>>
nodejs中安装webpack的简单使用
查看>>
array_combine php一个比较偏门的数组函数
查看>>
js数字转换为float,取N个小数
查看>>
lr参数化取值规则总结
查看>>
RN的第一个API-----注册组件Appregistry
查看>>
DevExpress Gridcontrol 显示序号列
查看>>
Delphi实现大写字母键打开提示
查看>>
SqlServer2008 数据库同步的两种方式 (发布、订阅)
查看>>
VS2010中,无法嵌入互操作类型“……”,请改用适用的接口的解决方法
查看>>
SpringBoot之springfox(Swagger) (ApiDoc接口文档)
查看>>
上手React Native--常用属性介绍
查看>>
Django 的认识,面试题
查看>>
TransactionScope 之分布式配置
查看>>
ExRichTextEdit.
查看>>
推荐些在线小制作小工具
查看>>