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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
javascript一些不错的函数脚本代码
Sep 10 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
原生JS中应该禁止出现的写法
May 05 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
php实现数字补零的方法总结
2018/09/12 PHP
node.js中的path.sep方法使用说明
2014/12/08 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
大专应届生个人的自我评价
2013/11/21 职场文书
总会计师岗位职责
2014/02/19 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
租房协议书
2014/04/10 职场文书
股东协议书范本
2014/04/14 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
学校师德师风整改措施
2014/10/27 职场文书
先进教师事迹材料
2014/12/16 职场文书
欢迎新生标语2015
2015/07/16 职场文书
python脚本框架webpy模板控制结构
2021/11/20 Python
python基础之//、/与%的区别详解
2022/06/10 Python
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle