{% if not config.exec_id == '' %}
<br />
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width: 0%" id="progressbar">
0%
</div>
</div> <script type="text/javascript">
var timerId = setInterval(getCurrentProgress, 1000);
$("#btn_submit").hide(); function getCurrentProgress() {
$.get( "progress", { exec_id: "{{ config.exec_id }}" } )
.done(function( data ) {
$("#progressbar").text(data.progress + '%').css("width", data.progress + '%'); if (data.progress == 100) {
clearInterval(timerId);
$("#progressbar").text('访问成功:' + data.success + ' 失败:' + data.fail).toggleClass('active deactive');
}
});
}
</script>
{% endif %}

Javascript: 动态显示进度条的更多相关文章

  1. php+javascript实现的动态显示服务器运行程序进度条功能示例

    本文实例讲述了php+javascript实现的动态显示服务器运行程序进度条功能.分享给大家供大家参考,具体如下: 经常有这样的业务要处理,服务器上有较多的业务需要处理,需要分批操作,于是就需要一个提 ...

  2. JavaScript 以及 css3进度条

    JavaScript css3进度条 使用css3实现进度条 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. JavaScript 进度条重复加载

    <!DOCTYPE HTML> <html> <head> <meta charset ="utf-8"> <title> ...

  4. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

  5. EasyUI Progressbar 进度条

    通过 $.fn.progressbar.defaults 重写默认的 defaults. 进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更新以便让用户知道当前正在执行的操 ...

  6. js图片预览带进度条

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  8. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

  9. 【JavaScript】HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

随机推荐

  1. Android 性能优化(2)性能工具之「Hierarchy Viewer 」Optimizing Your UI:分析哪个view有性能问题,查看屏幕上某像素点的坐标,颜色等

    Optimizing Your UI In this document Using Hierarchy Viewer Running Hierarchy Viewer and choosing a w ...

  2. kali中的APT软件包处理工具(apt-get)、Debian软件包管理器(dpkg)、源代码压缩和Nessus安装实用指南

    写在前面的话 能看懂此博客的朋友,深信你有一定的Kali基础了. 使用APT软件包处理工具(apt-get).Debian软件包管理器(dpkg)来维护.升级和安装自定义及第三方应用程序 APT软件包 ...

  3. SQL数据库,增加查询修改以及防sql写入攻击

    SQL添加信息 SQL查询信息 SQL修改信息 SQL语句写入攻击: 普通语句添加信息 sql写入语句攻击: 解决方法:分开传送语句与参数关键:@

  4. SQL编程语句

    视图 视图就是我们查询出来的虚拟表创建视图:create view 视图名 as SQL查询语句,分组,排序,in 等都不能写视图的用法: select * from 视图名 SQL编程 定义变量:d ...

  5. js截取字符串 区分中英文

    方法如下: //在一个字符串中截取前面部分文字,汉字.全角符号按2个占位,数字英文.半角按一个占位,未显示完的最后加入“……”. //适合多行显示. function suolve(str, sub_ ...

  6. Android基础夯实--重温动画(一)之Tween Animation

    心灵鸡汤:真正成功的人生,不在于成就的大小,而在于你是否努力地去实现自我,喊出自己的声音,走出属于自己的道路. 摘要 不积跬步,无以至千里:不积小流,无以成江海.学习任何东西我们都离不开扎实的基础知识 ...

  7. Android常见问题总结(二)

    1.布局文件LinearLayout线性布局添加内容报错. 解决方法: 线性布局LinearLayout中包裹的元素多余1个需要添加android:orientation属性. 2.android 的 ...

  8. Python3.4的Pillow库实现验证码图片

    转自 http://blog.csdn.net/bin381/article/details/41969493 from PIL import Image,ImageDraw, ImageFont, ...

  9. python学习笔记(6)——for...in &while

    for x in ...循环就是把每个元素代入变量x,然后执行缩进块的语句. 注意:python中的格式也起到语法规则的作用,缩进块就是一个例 求和问题,比较异同 1/sum= ,,,,,,,,,]: ...

  10. What is JSON

    JSON (JavaScript Object Notation)  是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON具有以下这些形式: 对象是一个无序的“‘名称/值’对” ...