基于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 相关文章推荐
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
微信小程序实现刷脸登录
May 25 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
js通过canvas生成图片缩略图
Oct 02 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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实现快钱支付功能(涉及到接口)
2013/07/01 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
python中的for循环
2018/09/28 Python
python开发游戏的前期准备
2019/05/05 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
创业融资计划书
2014/04/25 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
请客吃饭开场白
2015/06/01 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
Go获取两个时区的时间差
2022/04/20 Golang