基于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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
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以及MYSQL日期比较方法
2012/11/29 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
flask中过滤器的使用详解
2018/08/01 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
校园十大歌手策划书
2014/02/01 职场文书
2014年情人节活动方案
2014/02/16 职场文书
师德演讲稿范文
2014/05/06 职场文书
外联部演讲稿
2014/05/24 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
体育教师研修感悟
2015/11/18 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Python如何把不同类型数据的json序列化
2021/04/30 Python
python 提取html文本的方法
2021/05/20 Python
MySQL 不等于的三种使用及区别
2021/06/03 MySQL