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 form action动态修改方法
Nov 04 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
在JS循环中使用async/await的方法
Oct 12 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里的中文变量说明
2011/07/23 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
Python数据结构之翻转链表
2017/02/25 Python
Python自动发邮件脚本
2017/03/31 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python实现批量压缩图片
2018/01/25 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python爬虫之自制英汉字典
2019/06/24 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
详解Python打包分发工具setuptools
2019/08/05 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
个人思想理论学习的自我鉴定
2013/11/30 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
React实现动效弹窗组件
2021/06/21 Javascript
Vue的生命周期一起来看看
2022/02/24 Vue.js