JS仿Windows开机启动Loading进度条的方法

 更新时间:2015年02月26日 15:22:43   作者:代码家园  
这篇文章主要介绍了JS仿Windows开机启动Loading进度条的方法,实例分析了javascript操作html元素及对应样式实现特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS仿Windows开机启动Loading进度条的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:
<html>
<title>JS仿Windows开机启动的Loading进度条</title>
</head>
<body style="margin:0;background-color:#5279CE;" scroll=no>
<table id=lw style="display:block;position:absolute;top:0;left:0;z-index:1;height:;width:" border="0" width="100%" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td width="100%" bgcolor="#5279CE" align="center"><font face="Wingdings" style="font-size:240px;color=#000000">Y</td>
</tr>
<tr>
<td height="10"  bgcolor="#3F5FB2">
<SCRIPT language=jscript>
 elt="0123456789ABCDEF";
 var sTBHTMLS="";
 var sTBHTMLE="";
 for(var i=0;i<0xFF-0x99;i+=1)
 {
  var cr="";
  var l;
  var sTBHTML="";
  l=i+0x99;
  for(var j=0;j<2;j++)
  {
   var n=l % 16;
   l=l >> 4;
   cr=elt.charAt(n)+cr;
  }
  l=i+0x33;
  for(var j=0;j<2;j++)
  {
   var n=l % 16;
   l=l >> 4;
   cr=elt.charAt(n)+cr;
  }
  l=i;
  for(var j=0;j<2;j++)
  {
   var n=l % 16;
   l=l >> 4;
   cr=elt.charAt(n)+cr;
  }
  var w=i>(0xFF-0xA0)?8:4
  sTBHTML="<span style='height:10;width:"+w+";background-color:#"+cr+";margin:0;padding:0'></span>"
  sTBHTMLS+=sTBHTML;
  sTBHTMLE=sTBHTML+sTBHTMLE;
 }
 var sTBHTML=sTBHTMLS+sTBHTMLE;
 document.write("<marquee id='loading' scrollamount='30' direction='right' scrolldelay='1' height='4' style='width:100%;height:10; font-size:6px;background-color:#003399'>")
 document.write(sTBHTML)
 document.write("</marquee>")
</SCRIPT></td>
 </tr>
 <tr>
<td width="100%" height="20%" bgcolor="#ECF0FF"><center><span id=load_txt style="font-size:12px;"><b id=showtxt style="color:red;font-size:12px;line-height:138%;">载入中,请稍候……</b></span></center>
<p align="center" style="font-size:9pt;">CopyRight@</p></td>
 </tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
var finderror = false;
function gopage()
{
 if(document.readyState=="complete")
 {
 showtxt.innerHTML="载入中,请稍候……"
 loading.style.display="none";
 }
}
//-->
</SCRIPT>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

  • 原生js实现贪食蛇小游戏的思路详解

    原生js实现贪食蛇小游戏的思路详解

    这篇文章主要介绍了原生js实现贪食蛇小游戏的思路详解,,文中给大家写出了注释,帮助大家理解代码,需要的朋友可以参考下
    2019-11-11
  • bootstrap paginator分页插件的两种使用方式实例详解

    bootstrap paginator分页插件的两种使用方式实例详解

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,下面通过本文给大家介绍bootstrap paginator分页插件的两种使用方式,一起看看吧
    2017-11-11
  • javascript实现数字配对游戏的实例讲解

    javascript实现数字配对游戏的实例讲解

    下面小编就为大家分享一篇javascript实现数字配对游戏的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 关于URL中的特殊符号使用介绍

    关于URL中的特殊符号使用介绍

    因为经常被Javascript中的rul的相关知识困扰,今天来总结一下URL的特殊字符
    2011-11-11
  • 原生JS+Canvas实现五子棋游戏

    原生JS+Canvas实现五子棋游戏

    这篇文章主要为大家详细介绍了原生JS+Canvas实现五子棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JavaScript双问号(??)操作符用法详解

    JavaScript双问号(??)操作符用法详解

    在现代JavaScript开发中,处理变量默认值是一个常见但容易引发bug的操作,很多开发者可能都遇到过这样的问题:使用||设置默认值时,意外覆盖了0、''等合法值,这时候,ES2020引入的双问号操作符(??)就能完美解决这类问题,本文将带您全面掌握这个操作符的使用场景和高级技巧
    2025-04-04
  • 微信小程序修改checkbox的样式代码实例

    微信小程序修改checkbox的样式代码实例

    这篇文章主要介绍了微信小程序修改checkbox的样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • javascript设计模式 – 模板方法模式原理与用法实例分析

    javascript设计模式 – 模板方法模式原理与用法实例分析

    这篇文章主要介绍了javascript设计模式 – 模板方法模式原理,结合实例形式分析了javascript模板方法模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • 微信小程序textarea层级过高的解决方法

    微信小程序textarea层级过高的解决方法

    这篇文章主要给大家介绍了关于微信小程序textarea层级过高问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • javascript打印大全(打印页面设置/打印预览代码)

    javascript打印大全(打印页面设置/打印预览代码)

    打印页面设置,打印页面预览在打印过程中经常会遇到,网上搜集整理了一些实用的打印方法与大家分享,感兴趣的朋友可以了解下哈
    2013-03-03

最新评论