基于javascript实现页面加载loading效果

 更新时间:2020年09月15日 17:08:09   作者:填坑女侠  
这篇文章主要为大家详细介绍了基于javascript实现页面加载loading效果的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实为大家分享了javascript实现页面加载loading效果,供大家参考,具体内容如下

效果图:

<html>
<head>
<title>正在载入</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr> 
<form name=loading>
<td align=center> 
<p><font color=gray>正在载入首页,请稍候.</font></p>
<p> 
<input type=text name=chart size=46 style="font-family:Arial; 
font-weight:bolder; color:gray;
 background-color:white; padding:0px; border-style:none;">
<br>
<input type=text name=percent size=46 style="font-family:Arial; 
color:gray; text-align:center; 
border-width:medium; border-style:none;">
<script>var bar = 0 
var line = "||" 
var amount ="||" 
count() 
function count(){ 
bar= bar+2 
amount =amount + line 
document.loading.chart.value=amount 
document.loading.percent.value=bar+"%" 
if (bar<99) 
{setTimeout("count()",100);} 
else 
{window.location = "目标页";} 
}
</script>
</p>
</td>
</form>
</tr>
</table>
</body>
</html>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

相关文章

  • js contains方法实现代码

    js contains方法实现代码

    IE有许多好用的方法,后来都被其他浏览器抄袭了,比如这个contains方法。如果A元素包含B元素,则返回true,否则false。唯一不支持这个方法的是IE的死对头firefox。
    2011-01-01
  • 一文总结JavaScript中常见的设计模式

    一文总结JavaScript中常见的设计模式

    在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”。在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”。,本文将总结了JavaScript中常见的十五种设计模式,感兴趣的朋友可以参考下
    2023-05-05
  • 可拖拽组件slider.js使用方法详解

    可拖拽组件slider.js使用方法详解

    这篇文章主要为大家详细介绍了可拖拽组件slider.js的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • js left,right,mid函数

    js left,right,mid函数

    在JAVASCRIPT中LEFT,RIGHT,MID函数的等价函数,非常适合经常用写asp的朋友
    2008-06-06
  • 简单的JS轮播图代码

    简单的JS轮播图代码

    这篇文章主要介绍了简单的JS轮播图实现方法,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • 微信小程序获取当前时间及星期几的实例代码

    微信小程序获取当前时间及星期几的实例代码

    这篇文章主要给大家介绍了关于利用微信小程序获取当前时间及星期几的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • js的Boolean对象初始值示例

    js的Boolean对象初始值示例

    Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)下面为大家介绍下js的Boolean对象初始值
    2014-03-03
  • Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。下面通过本文给大家介绍Bootstrap 轮播(Carousel)插件,非常不错,需要的朋友参考下吧
    2016-12-12
  • ionic 自定义弹框效果

    ionic 自定义弹框效果

    这篇文章主要介绍了ionic 自定义弹框效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • javascript新建标签,判断键盘输入,以及判断焦点(示例代码)

    javascript新建标签,判断键盘输入,以及判断焦点(示例代码)

    这篇文章主要介绍了javascript新建标签,判断键盘输入,以及判断焦点(示例代码)。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11

最新评论