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 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
python抓取网页中图片并保存到本地
2015/12/01 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
自我评价中英文语句
2013/11/30 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
整脏治乱工作简报
2015/07/21 职场文书
2016国培研修心得体会
2016/01/08 职场文书
python如何获取网络数据
2021/04/11 Python
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
在python中读取和写入CSV文件详情
2022/06/28 Python