基于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简化Ajax开发 Ajax开发入门
Oct 14 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 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
解决GD中文乱码问题
2007/02/14 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
快速查询Python文档方法分享
2017/12/27 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python标记语句块使用方法总结
2019/08/05 Python
python和php哪个容易学
2020/06/19 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
大专会计自我鉴定
2014/02/06 职场文书
大学生心理活动总结
2014/07/04 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
工伤事故证明
2014/10/20 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2015年安全月活动总结
2015/03/26 职场文书
信息技术研修心得体会
2016/01/08 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android