基于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程序设计有所帮助。

相关文章

  • uniapp使用webview嵌入vue页面及通信实现方式

    uniapp使用webview嵌入vue页面及通信实现方式

    项目中有需要嵌入其他H5的页面的业务需求,这篇文章主要给大家介绍了关于uniapp使用webview嵌入vue页面及通信实现方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • js中调用微信的扫描二维码功能的实现代码

    js中调用微信的扫描二维码功能的实现代码

    这篇文章主要介绍了在js中调用微信的扫描二维码功能的实现代码,本文给大家分享了注意事项及常见问题分析,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 微信小程序返回到顶部功能的简单实现

    微信小程序返回到顶部功能的简单实现

    在做微信小程序开发时,遇到一个问题,要如何实现返回顶部的功能,下面这篇文章主要给大家介绍了微信小程序返回到顶部功能的简单实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • JavaScript 短路运算的实现

    JavaScript 短路运算的实现

    本文主要介绍了JavaScript 短路运算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • js eval木马代码,以后再分析吧

    js eval木马代码,以后再分析吧

    js eval木马代码,以后再分析吧...
    2007-03-03
  • JS实现的文字与图片定时切换效果代码

    JS实现的文字与图片定时切换效果代码

    这篇文章主要介绍了JS实现的文字与图片定时切换效果代码,可实现定时切换及鼠标点击切换两种效果,涉及JavaScript鼠标事件控制页面样式的相关技巧,需要的朋友可以参考下
    2015-10-10
  • JS实现网页背景颜色与select框中颜色同时变化的方法

    JS实现网页背景颜色与select框中颜色同时变化的方法

    这篇文章主要介绍了JS实现网页背景颜色与select框中颜色同时变化的方法,实例分析了javascript操作select及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JS实现点击复选框将按钮或文本框变为灰色不可用的方法

    JS实现点击复选框将按钮或文本框变为灰色不可用的方法

    这篇文章主要介绍了JS实现点击复选框将按钮或文本框变为灰色不可用的方法,涉及javascript动态修改页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 基于JavaScript实现大文件上传后端代码实例

    基于JavaScript实现大文件上传后端代码实例

    这篇文章主要介绍了基于JavaScript实现大文件上传后端代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 深入浅出es6模板字符串

    深入浅出es6模板字符串

    这篇文章主要介绍了深入浅出es6模板字符串,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论