<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul{ list-style:none;}
.table-body li{line-height:60px; height:60px; overflow:hidden; position:relative;}
/*进度条 */
.barAll{position:absolute; top:18px; left:598px; color:#cbdbe6;}
.barnum-1{width:870px;}
.barnum-2{ width:1072px;}
.progress{ position:relative; height:24px; background-color:#cbdbe6; line-height:24px;}
#progress-bar{line-height:24px;text-align:right; background-color:#ffb74d;-webkit-transition:all .3s; color:#eaeaea;}
.progress-lbar{position:absolute; right:-64px; top:0; color:#acacac;}
</style>
</head>
<body>
<ul class="table-body" id="tableBody">
<li>
<span class="numAll num">1</span>
<div class="barAll barnum-1">
<div class="progress">
<div id="progress-bar"><span class="progress-sbar" id="progress-sbar">485,931</span></div>
<span class="progress-lbar" id="progress-lbar">800000</span>
</div>
</div>
</li>
<li>
<span class="numAll num">2</span>
<div class="barAll barnum-2">
<div class="progress">
<div id="progress-bar"><span class="progress-sbar" id="progress-sbar">409,280</span></div>
<span class="progress-lbar" id="progress-lbar">2,400,000</span>
</div>
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var str1=$('#progress-sbar').text(),
arr1= str1.split(","),
strNew1=parseInt(arr1.join(""));
var str2=$('#progress-lbar').text(),
arr2= str2.split(","),
strNew2=parseInt(arr2.join(""));
var c = ((strNew1/strNew2)*100).toFixed(2)+'%';
$('li').each(function(index){
$('li #progress-bar').eq(index).css('width',c);
})
})
</script>
</body>
</html>
joffyzou
相关分类