jQuery生成假加载动画效果


Posted in Javascript onDecember 01, 2016

在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画

script片段:

<script type="text/javascript">
var bar = 0; 
var line = "||" ; 
var amount ="||" ; 
function count(){ 
bar= bar+2 ; 
amount =amount + line; 
$("#chart").val(amount);
$("#percent").val(bar+"%"); 
if (bar<99){
//设置1.5秒循环一次
setTimeout("count()",150);
}else{
$("#beforeSee").hide();
$("#pdfSee").show();
};
};
window.onload = function (){
PDFObject.embed("请求?code=${vdata.code}", "#pdfSee");
count(); 
}; 
</script>

body片段:

<body >
<div align=center id="beforeSee" width="100%" height="100%"> 
<p><span class="red" style="font-size:50px;">拼命加载中,请稍后</span></p> 
<p> 
<input type="text" id="chart" 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" id="percent" name="percent" size=46 style="font-family:Arial; color:gray; text-align:center; border-width:medium; border-style:none;">
<script type="text/javascript">
</script>
</p> 
</div>
<div align=center id="pdfSee" style="display:none" width="100%" height="100%">
<p><span class="red" style="font-size:50px;">控件丢失,请重新加载</span></p>
</div>
</body>

以上所述是小编给大家介绍的jQuery生成假加载动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery tools 系列 scrollable学习
Sep 06 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
基于Vue过渡状态实例讲解
Sep 14 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
解析AngularJS中get请求URL出现的跨域问题
Dec 01 #Javascript
浅谈js键盘事件全面控制
Dec 01 #Javascript
jstree的简单实例
Dec 01 #Javascript
Vue.JS入门教程之事件监听
Dec 01 #Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 #Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 #Javascript
jsTree使用记录实例
Dec 01 #Javascript
You might like
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
jQuery使用方法
2017/02/04 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
django session完成状态保持的方法
2018/11/27 Python
创建Django项目图文实例详解
2019/06/06 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
销售类个人求职信范文
2013/09/25 职场文书
中医专业应届生求职信
2013/11/17 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
临床专业自荐信
2014/06/22 职场文书
公司食堂管理制度
2015/08/05 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
php去除deprecated的实例方法
2021/11/17 PHP
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers