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 相关文章推荐
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
jquery实现pager控件示例
Apr 09 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
深入理解js中的加载事件
Feb 08 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 Javascript
解析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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vue实例的选项总结
2020/06/09 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
怎样写留学自荐信
2013/11/11 职场文书
村委会贫困证明范文
2014/09/21 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
七年级作文之下雨天
2019/12/23 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
oracle索引总结
2021/09/25 Oracle
windows server2008 开启端口的实现方法
2022/06/25 Servers