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 相关文章推荐
通过url查找a元素并点击
Apr 09 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
vue 点击其他区域关闭自定义div操作
Jul 17 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
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
python实现合并两个数组的方法
2015/05/16 Python
python执行使用shell命令方法分享
2017/11/08 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
详解Python self 参数
2019/08/30 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
python实现图像拼接
2020/03/05 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
师范教师毕业鉴定
2014/01/13 职场文书
大学秋游活动方案
2014/02/11 职场文书
美国留学经济担保书
2014/05/20 职场文书
员工薪酬激励方案
2014/06/13 职场文书
前台文员岗位职责
2015/02/04 职场文书
护士2015年终工作总结
2015/04/29 职场文书
小学生运动会广播
2015/08/19 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python