基于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 相关文章推荐
TBCompressor js代码压缩
Jan 05 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
vue实现图片上传预览功能
Dec 23 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产生随机字符串函数
2006/12/06 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
python中退出多层循环的方法
2018/11/27 Python
python实现3D地图可视化
2020/03/25 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
电子商务助理求职自荐信
2014/04/10 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
建筑安全标语
2014/06/07 职场文书
素质教育学习心得体会
2016/01/19 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电