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 相关文章推荐
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
Vue如何基于es6导入外部js文件
May 15 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 读取shell管道传输过来的内容
2010/03/01 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
PHP7.0版本备注
2015/07/23 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
AJAX在JQuery中的应用详解
2019/01/30 jQuery
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
详解Python Socket网络编程
2016/01/05 Python
python实现杨辉三角思路
2017/07/14 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
tensorflow更改变量的值实例
2018/07/30 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
详解django中使用定时任务的方法
2018/09/27 Python
20行python代码实现人脸识别
2019/05/05 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Apache部署Django项目图文详解
2019/07/30 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python装饰器使用实例详解
2019/12/14 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
高中生评语大全
2014/04/25 职场文书
民政局未婚证明
2015/06/15 职场文书
公司酒会主持词
2015/07/02 职场文书
诚信教育主题班会
2015/08/13 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
python字符串的一些常见实用操作
2022/04/06 Python