基于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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
javascript执行环境及作用域详解
May 05 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
详解Python 切片语法
2019/06/10 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
Django实现基于类的分页功能
2019/10/31 Python
聊聊python中的异常嵌套
2020/09/01 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
财政局个人总结
2015/03/04 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android