基于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管中窥豹 形参与实参浅析
Dec 17 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
vue resource发送请求的几种方式
Sep 30 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
jquery实现excel导出的方法
2013/04/04 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
Python制作爬虫抓取美女图
2016/01/20 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
PyQt5实现简易计算器
2020/05/30 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
django 模版关闭转义方式
2020/05/14 Python
Keras 使用 Lambda层详解
2020/06/10 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
购买原创艺术品:Zatista
2019/11/09 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
网聊搭讪开场白
2015/05/28 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript