基于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 相关文章推荐
JavaScript 函数replace深入了解
Mar 14 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
JS hashMap实例详解
May 26 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
php中的实现trim函数代码
2007/03/19 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python导入模块交叉引用的方法
2019/01/19 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python conda操作方法
2019/09/11 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Python如何读取、写入CSV数据
2020/07/28 Python
管理学专业个人求职信范文
2013/12/13 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python