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 陷阱 window全局对象
Nov 26 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 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
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
Python使用django搭建web开发环境
2017/06/09 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python编写计算器功能
2019/10/25 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
python 使用shutil复制图片的例子
2019/12/13 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
python中sys模块是做什么用的
2020/08/16 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
电子银行营销方案
2014/02/22 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
师德标兵事迹材料
2014/12/19 职场文书
廉洁自律证明
2015/06/24 职场文书
python 离散点图画法的实现
2022/04/01 Python
公历12个月名称的由来
2022/04/12 杂记