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


Posted in Javascript onSeptember 15, 2020

本文实为大家分享了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程序设计有所帮助。

Javascript 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 #Javascript
javascript移动开发中touch触摸事件详解
Mar 18 #Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 #Javascript
基于jQuery实现收缩展开功能
Mar 18 #Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 #Javascript
jQuery.deferred对象使用详解
Mar 18 #Javascript
JS中的二叉树遍历详解
Mar 18 #Javascript
You might like
php设计模式 Composite (组合模式)
2011/06/26 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
php制作文本式留言板
2015/03/18 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
vue实现员工信息录入功能
2020/06/11 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
Python读取实时数据流示例
2019/12/02 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Python super()方法原理详解
2020/03/31 Python
python属于跨平台语言码
2020/06/09 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
聘任协议书(挂靠)
2015/09/21 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers