如何实现进度条效果呢美洲杯赌球 ?

2019-05-04 23:48 来源:未知

如何实现进度条效果呢 ?

  • 效果:点击页面的某个按钮,弹出一个进度条,然后实时显示进度,直到任务完成。
  • 思路:页面里面有个隐藏的进度条,点击按钮后弹出。ajax循环请求数据,直到全部完成
  • 难点:ajax的同步请求问题

  1、首先引入页面样式:

       .myProgressDiv{
            width:450px;
            border:1px solid #6C9C2C;
            border-radius: 8px;
            height:25px;
        }

        #bar{
            background:#20B2AA;
            float:left;
            height:100%;
            text-align:center;
            line-height:150%;
            border-radius: 8px;
        }
        #maskDiv{
            position: fixed;
            /*top: 0;*/
            top:-150px;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 20;
        }
        #progressBox{
            position: relative;
        }
        #total{
            font-size: 1.2em;
            position: absolute;
            left: 48%;
            top: 10%;
        }    

  2、页面 进度条 HTML 元素

<div id="maskDiv" style="display: none">
    <div id="progressBox">
        <div class="myProgressDiv">
            <div id="bar" style="width:0%;"></div>
        </div>

    </div>
</div>

  3、JS 实现

 

       定义全局的变量 i = 0 , n = 12; 一共请求多少次(服务器返回)
  点击按钮后

  $("#maskDiv").show();
  syncPage();

var bar = document.getElementById("bar");
var total = document.getElementById("total");

function syncPage() {
    if (n < i ) {
        bar.style.width = "100%";
        total.innerHTML = bar.style.width;
        return;
    }
    $.ajax({
        url: ctx   '/../../sync_page_data', //服务器端请求地址
        method:'post',
        dataType: 'json',
        data:{"offset" : i * 20,"count": 20},
        async: true,
        success: function (data){
            i  ;
            if(data && data.flag){
                let progress = Math.ceil(i/n * 100);
                if(progress>99){
                    progress = 99;
                }
                bar.style.width= progress    "%";
                total.innerHTML = bar.style.width;
                console.info(bar.style.width);
                timeout= window.setTimeout("syncPage()",100);

            }else{
                $("#maskDiv").hide();
                bar.style.width = 0;
                layer.alert('操作失败:' data.message, {icon: 2});
            }
        },
        error: function (data, status, e){
            layer.msg('网络错误,同步失败');
        }
    });
}

  

  重点: timeout= window.setTimeout("syncPage()",100); 递归调用

  这样一个完整的进度条就实现了。

 

angularjs作为一个全ajax的框架,对于请求,如果页面上不做任何操作的话,在结果烦回来之前,页面是没有任何响应的,不像普通的HTTP请求,会有进度条之类。

什么是拦截器?

$httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。下面的例子告诉你怎么创建一个拦截器:

<!-- lang: js -->
module.factory('myInterceptor', ['$log', function($log) {
 $log.debug('$log is here to show you that this is a regular factory with injection');
 var myInterceptor = {
  ....
  ....
  ....
 };
 return myInterceptor;
}]);

然后通过它的名字添加到 $httpProvider.interceptors 数组:

<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) {
 $httpProvider.interceptors.push('myInterceptor');
}]);

先给大家展示下效果图:

美洲杯赌球 1

本文通过对httpProvider注入拦截器实现loading。

html代码

<div class="loading-modal modal" ng-if="loading">
 <div class="loading">
  <img src="<?=$this->module->getAssetsUrl()?>/img/loading.gif" alt="美洲杯赌球 2"/>
 </div>
</div>
TAG标签:
版权声明:本文由美洲杯赌球发布于计算机教程,转载请注明出处:如何实现进度条效果呢美洲杯赌球 ?