做一个显示任务完成情况的进度条：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<script src="jquery.min.js"></script>

<style>

body{ text-align: center; }

	.parent{ width: 600px; height: 20px; border: 1px solid #000;margin: 10px auto;cursor:  pointer ; position: relative; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) ; border-radius: 20px; background: rgb(25,25,25); padding: 2px;}

	.child{ height: 100%; width: 0px ;background: rgb(92,100,121); cursor:  pointer ; color: #fff;border-radius: 20px;  }

	.parent span{ position: absolute; right: 9px; top: 2px ; color: #fff;}

</style>

</head>

<body>

<div class="rank_box">

<div style="float: left;">

	<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>

</div>

	<div class="parent" style="float: left;">

    	<div class="child"></div>

    	<span></span>

    </div>

    <div style="clear: both;"></div>

</div>

<div class="rank_box">

<div style="float: left;">

	<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>

</div>

	<div class="parent" style="float: left;">

    	<div class="child"></div>

    	<span></span>

    </div>

    <div style="clear: both;"></div>

</div>

<div class="rank_box">

<div style="float: left;">

	<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>

</div>

	<div class="parent" style="float: left;">

    	<div class="child"></div>

    	<span></span>

    </div>

    <div style="clear: both;"></div>

</div>

<div class="rank_box">

<div style="float: left;">

	<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>

</div>

	<div class="parent" style="float: left;">

    	<div class="child"></div>

    	<span></span>

    </div>

    <div style="clear: both;"></div>

</div>

<div class="rank_box">

<div style="float: left;">

	<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>

</div>

	<div class="parent" style="float: left;">

    	<div class="child"></div>

    	<span></span>

    </div>

    <div style="clear: both;"></div>

</div>

<div class="rank_box">

<div style="float: left;">

	<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>

</div>

	<div class="parent" style="float: left;">

    	<div class="child"></div>

    	<span></span>

    </div>

    <div style="clear: both;"></div>

</div>

<div class="rank_box">

<div style="float: left;">

	<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>

</div>

	<div class="parent" style="float: left;">

    	<div class="child"></div>

    	<span></span>

    </div>

    <div style="clear: both;"></div>

</div>

<div class="rank_box">

<div style="float: left;">

	<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>

</div>

	<div class="parent" style="float: left;">

    	<div class="child"></div>

    	<span></span>

    </div>

    <div style="clear: both;"></div>

</div>

<div class="rank_box">

<div style="float: left;">

	<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>

</div>

	<div class="parent" style="float: left;">

    	<div class="child"></div>

    	<span></span>

    </div>

    <div style="clear: both;"></div>

</div>

<div class="rank_box">

<div style="float: left;">

	<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>

</div>

	<div class="parent" style="float: left;">

    	<div class="child"></div>

    	<span></span>

    </div>

    <div style="clear: both;"></div>

</div>

<button onclick="getAgentdate()" > 提交</button>

<script>

    //进度条函数

    function sumjdt(into_money,trade_money,direct_customer,group_customer,group_people,agent_a,agent_b,direct_into,customer_trade,active_customer,mark){

        var rate_agent_a = [];

        $.ajax({

            url:'qin.json',

            data:'',

            type:'get',

            dataType:'json',

            success:function(data){

                var rate_agent_a = [data.into_money,data.trade_money,data.direct_customer,data.group_customer,data.group_people,data.agent_a,data.agent_b,data.direct_into,data.customer_trade,data.active_customer,data.mark];

                var rank = [into_money,trade_money,direct_customer,group_customer,group_people,agent_a,agent_b,direct_into,customer_trade,active_customer,mark]

                for( var i = 0 ;i<rank.length;i++){

                    if (rate_agent_a[i]==0) {

                        $(".rank_box").eq(i).hide();

                    }else {

                        var rate=[];

                        rate[i] = rank[i]/rate_agent_a[i]

                        $(".child").eq(i).width(rate[i]*100+'%');

                        $(".parent").eq(i).find('span').text(rate[i]*100+'%');

                    }

                }

                $(".parent").mouseover(function() {

                    var index = $(".parent").index($(this));

                    $(".child").eq(index).text(rank[index]+'/'+rate_agent_a[index]);

                });

                $(".parent").mouseout(function() {

                    $(".child").text("");

                });

                return rate_agent_a;

            },

            error:function() {

                alert("获取失败");

            }

        });

    }

    function getAgentdate(){

    $.ajax({

        url:'text.json',

        data:'',

        type:'get',

        dataType:'json',

        success:function(data){

            sumjdt(data.into_money,data.trade_money,data.direct_customer,data.group_customer,data.group_people,data.agent_a,data.agent_b,data.direct_into,data.customer_trade,data.active_customer,data.each_intomoney,data.rate_agent);

        },

        error:function() {

            alert("获取失败");

        }

});

}

</script>

</body>

</html>

两段用到的测试json:

　　qin.json:

{ "into_money":"" , "trade_money":"3000.00","direct_customer":"" ,"group_customer":"" ,"group_people":"" ,"agent_a":"" ,"agent_b":"" ,"direct_into":"" ,"customer_trade":"" ,"active_customer":"" ,"rate_agent":""}

　　text.json

{ "into_money":"" , "trade_money":"1000.00","direct_customer":"" ,"group_customer":"" ,"group_people":"" ,"agent_a":"" ,"agent_b":"" ,"direct_into":"" ,"customer_trade":"" ,"active_customer":"" ,"rate_agent":""}

进度条函数 -------ajax初试的更多相关文章

  1. nprogress进度条和ajax全局事件

    nprogress和ajax全局事件 nprogress 官方网站:http://ricostacruz.com/nprogress/ 下载地址:https://github.com/rstacruz ...

  2. asp.net 后台多线程异步处理时的 进度条实现一（Ajax+Ashx实现以及封装成控件的实现）

    (更新:有的同学说源代码不想看,说明也不想看,只想要一个demo,这边提供一下:http://url.cn/LPT50k (密码:TPHU)) 工作好长时间了,这期间许多功能也写成了不少的控件来使用, ...

  3. jQuery ajax 标准写法及进度条绘制

    jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...

  4. asp.net XMLHttpRequest 进度条以及lengthComputable always false的解决办法

    一直用ajax好长时间了,对其原理也有一些了解,最近由于项目需要,使用ajax异步进度条的效果,就研究了一下,用原生的XMLHttpRequest实现进度条函数,XMLHttpRequest有以下函数 ...

  5. struts2：上传多个文件时实现带进度条、进度详细信息的示范

    上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...

  6. PHP+ajaxForm异步带进度条上传文件实例

    在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: v ...

  7. SAP进度条

     一.代码示例: ),"行数 ll_tabix(),"循环标号 ll_pecnt DECIMALS ,"百分比 ll_pecet(),"百分数 ll_text( ...

  8. python (大文件下载及进度条展示) 验证客户端链接的合法性,socketserver

    ##########总结########### 文件校验加进度条显示 ####server import os import json import socket import struct impo ...

  9. Python学习笔记-进度条

    该功能用以输出任务百分比 #conding=utf-8 import sys #进度条函数,输入当前任务以及总任务数 def ProgressBar(Current,Total): processpe ...

随机推荐

  1. JavaScript基础-即时函数(Immediate Functions)(017)

    1.即时函数的声明方法 即时函数(Immediate Functions)是一种特殊的JavaScript语法,可以使函数在定义后立即执行:(function () {    alert('watch ...

  2. 鹅厂车联网探索：5G下边缘云计算的车路协同实践

    5G网络下,多接入边缘计算(MEC)应运而生.结合TKEStack强大的集群管理能力和异构计算资源管理能力,腾讯打造了一个功能完备的边缘计算PaaS平台TMEC,提供了高精确度定位.视频处理.无线网络 ...

  3. 2020年Web前端开发工程师市场怎么样？学会什么技术才能拿到高薪

    几乎整个互联网行业都缺前端工程师,不仅在刚起步的创业公司,对上市公司乃至巨头这个问题也一样存在.据统计,国外的前端开发人员和后端开发人员比例约1:1,但是在国内比例却在1:3以下, Web前端开发职位 ...

  4. docker 容器中 apt-get install 软件时，提示无法定位软件包

    [解决] 执行 apt-get update 然后再进行安装,即可. (完)

  5. JVM学习篇-第一篇

    JVM学习篇-第一篇 JDK( Java Development Kit): ​ Java程序设计语言.Java虚拟机.Java类库三部分统称为JDK,JDK是用于支持Java程序开发的最小环境** ...

  6. 每日一题 - 剑指 Offer 49. 丑数

    题目信息 时间: 2019-07-03 题目链接:Leetcode tag:动态规划 小根堆 难易程度:中等 题目描述: 我们把只包含质因子 2.3 和 5 的数称作丑数(Ugly Number).求 ...

  7. 从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

    在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 如果资源未缓存,发起新请求 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证. 检验 ...

  8. 如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

    任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战.设备间不同的屏幕尺寸.分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著! SVG(可 ...

  9. Flask路由中使用正则表达式匹配

    1.说明 由于flask并不支持直接使用正则表达式来匹配路由,我们可以使用werkzeug.routing的BaseConverter来实现 2.代码 from flask import Flask ...

  10. 数据可视化之powerBI技巧（八）Power BI按多列排序的技巧

    目前PowerBI的表格已经支持多列排序,但是矩阵依然还不支持按多个字段排序,虽然这个需求很普遍,这里利用DAX提供一个变通的实现方式. 模拟数据如下,有两个数据指标: 对类别首先按[指标一]进行排序 ...