基于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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
一句话JavaScript表单验证代码
Aug 02 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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会员权限控制实现原理分析
2011/05/29 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
简单的js表单验证函数
2013/10/28 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
详解Bootstrap插件
2016/04/25 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python Matplotlib库入门指南
2015/05/18 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
30岁生日感言
2014/01/25 职场文书
音乐教学随笔感言
2014/02/19 职场文书
社区健康教育实施方案
2014/03/18 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
商务经理岗位职责
2014/07/30 职场文书
英文道歉信
2015/01/20 职场文书
Nginx速查手册及常见问题
2022/04/07 Servers