Javascript: 动态显示进度条 

 1         {% if not config.exec_id == '' %}
 2         <br />
 3         <div class="progress">
 4           <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width: 0%" id="progressbar">
 5             0%
 6           </div>
 7         </div>
 8 
 9           <script type="text/javascript">
10             var timerId = setInterval(getCurrentProgress, 1000);
11             $("#btn_submit").hide();
12 
13             function getCurrentProgress() {
14               $.get( "progress", { exec_id: "{{ config.exec_id }}" } )
15               .done(function( data ) {
16                 $("#progressbar").text(data.progress + '%').css("width", data.progress + '%');
17 
18                 if (data.progress == 100) {
19                   clearInterval(timerId);
20                   $("#progressbar").text('访问成功：' + data.success + ' 失败：' + data.fail).toggleClass('active deactive');
21                 }
22               });
23             }
24           </script>
25         {% endif %}

 

posted @ 2017-02-06 13:28  GreatK  阅读(2015)  评论(0)    收藏  举报