基于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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
javascript模块化简单解析
Apr 07 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 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
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
虚拟机下载python是否需要联网
2020/07/27 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
python 制作磁力搜索工具
2021/03/04 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
2014年高三毕业生自我评价
2014/01/11 职场文书
白酒市场营销方案
2014/02/25 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
护理自荐信
2019/05/14 职场文书