铁雪资源网 Design By www.gsvan.com
近期在做一个网站的查询功能，但是由于数据量确实太大，分页查询后也是很慢，同时查询出的数据部分还要进行一些处理，导致用户说要我们给他们加一个查询进度，要百分比显示。加上加载动画很简单，layui有现成的。但是还要动画。。我tm（手动微笑），原谅我水平比较低。然后就瞎搞，终于搞出了一个加载的进度，虽然还是假的。。。
上面废话有点多，直接切入正题。
首先是html代码。。。。。（不存在的2333333........）
然后是js代码：
//这里是必须要有的，_index的作用是用来关闭遮罩，详细看layui的文档
var _index;
var _lp_baseTime = 0;
var _lp_startTime = 0;
function updateLoadProgress() {
if (_lp_baseTime < 0) {
layer.close(_index);
return;
}
var dval = parseInt(new Date().valueOf())- parseInt(_lp_startTime);
var timeDifference = (dval / _lp_baseTime).toFixed(2);
var lp = timeDifference < 1 "#loadProgress").html(parseInt(lp));
setTimeout(function () { updateLoadProgress(); return; }, 650);
}
function 你的函数(){
$.ajax({
url:url,
async:true,
data:{},
beforeSend：function(){
//敲黑板
_index = layer.load(1, {
content: "<div style='margin-left:-23px;padding-top:44px;width:120px;color:#FFF;'>正在查询(<span id='loadProgress' >0</span>%)</div>",
shade: [0.5, '#000']
});
//这里是预估的时间，因为整个进度都是根据消耗时间计算的 = =
//这里的start,end,stns都是原始项目里带的。这个的作用是计算要等待的时长的，可以给一个固定值或者其他的东西公式，保证结果是正整数，单位是毫秒即可。
_lp_baseTime = Math.abs(new Date(end).valueOf() - new Date(start).valueOf()) / 3600000 * stns.split(',').length * 150;
_lp_startTime = new Date().valueOf();
setTimeout(function () { updateLoadProgress(); return; }, 60);
},
success:function(){ _lp_baseTime = -1; $("#loadProgress").html("100");layer.close(_index); },
error:function(){
_lp_baseTime = -1;
layer.close(_index);
}
});
}
OK，就是这么多，主要是利用预估的时间与现在已进行时间进行预估做比较，所以实际使用的时候还要进行一定程度的调整，但是，最起码也是个思路是不是233333，参考一下吧
超过时间时进度会定格在99%，所以，emmmm....注意预留一些时间
以上这篇layui 实现加载动画以及非真实加载进度的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
layui,加载,动画,进度
铁雪资源网 Design By www.gsvan.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无layui 实现加载动画以及非真实加载进度的方法的评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。