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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
jQuery-App输入框实现实时搜索
Nov 19 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
destoon常用的安全设置概述
2014/06/21 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
如何在python中判断变量的类型
2020/07/29 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
影视制作岗位职责
2013/12/04 职场文书
2014庆六一活动方案
2014/03/02 职场文书
服装店营销方案
2014/03/10 职场文书
销售会计岗位职责
2014/03/15 职场文书
公司承诺书怎么写
2014/05/24 职场文书
2014年创卫工作总结
2014/11/24 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫