进度条函数 -------ajax初试
做一个显示任务完成情况的进度条：
<!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":"5000" , "trade_money":"3000.00","direct_customer":"0" ,"group_customer":"0" ,"group_people":"0" ,"agent_a":"0" ,"agent_b":"0" ,"direct_into":"0" ,"customer_trade":"0" ,"active_customer":"0" ,"rate_agent":"3"}
text.json
{ "into_money":"2000" , "trade_money":"1000.00","direct_customer":"0" ,"group_customer":"0" ,"group_people":"0" ,"agent_a":"0" ,"agent_b":"0" ,"direct_into":"0" ,"customer_trade":"0" ,"active_customer":"0" ,"rate_agent":"1"}
浙公网安备 33010602011771号