进度条函数 -------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"}