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操作select控件的几种方法
Jun 02 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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字符串分割函数explode的实例代码
2013/02/07 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python中模块string.py详解
2017/03/12 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
使用python生成目录树
2018/03/29 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Python中包的用法及安装
2020/02/11 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
大学生村官任职感言
2014/01/09 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
青奥会口号
2014/06/12 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android