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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
解析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入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Sublime开发python程序的示例代码
2018/01/24 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
银行会计财务工作个人的自我评价
2013/10/29 职场文书
英文自荐信
2013/12/15 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
golang import自定义包方式
2021/04/29 Golang
Python的这些库,你知道多少?
2021/06/09 Python
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫