基于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的划词搜索实现(备忘)
Sep 14 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
js 浮动层菜单收藏
2009/01/16 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
使用console进行性能测试
2015/04/27 Javascript
javascript基本算法汇总
2016/03/09 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
Python MD5加密实例详解
2017/08/02 Python
Win8下python3.5.1安装教程
2020/07/29 Python
带你认识Django
2019/01/15 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
以下的初始化有什么区别
2013/12/16 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
工商管理本科毕业生求职信范文
2013/10/05 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
意向书范文
2014/03/31 职场文书
慈善晚会策划方案
2014/05/14 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书