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 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
基于JavaScript实现留言板功能
Mar 16 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
编写PHP的安全策略
2006/10/09 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php分页函数示例代码分享
2014/02/24 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
Python性能优化技巧
2015/03/09 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
Pytorch转tflite方式
2020/05/25 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
合作经营协议书
2014/04/17 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
初中语文教学研修日志
2015/11/13 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技