<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/indianarecords.css"/>
</head>
<body>
<!--
作者：offline
时间：2017-03-29
描述：固定的部分
-->
<h1>汉字占2个字符，字母占1个字符</h1>
<div id="slider" class="mui-slider">
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar">
<label class="label" >
<span class="mui-pull-left">
总须
<span class="count">920</span>
</span>
<span class="mui-pull-right">
剩余
<a href="javascript:;" class="lastcount">754</a>
</span>
</label>
<div class="progress">
<div class="progress-bar">
</div>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">必中黄金汽车等等等dd</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">luckdoggggg</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">哈哈哈</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">哈哈哈哈哈哈</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">1234567890</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--
作者：offline
时间：2017-03-29
描述：购买的列表
-->
</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/indianarecords.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript" charset="UTF-8">
mui.init();
document.documentElement.style.fontSize=document.documentElement.clientWidth/3.75+'px';
$(function(){
//progress的长度
var progresslength = 1- ($('.lastcount').text()/$('.count').text());
progresslength = progresslength * 100;
$('.progress-bar').css('width',progresslength+'%');
//限制获得者名字的长度
var uncover = $('.progress_bar_other').length;
for(var i=0;i<uncover;i++){
var winner = $('.progress_bar_other:eq('+i+') a').text();
var totallength = 0;
for(var j=0;j<winner.length;j++){
var intcode = winner.charCodeAt(j);
if(intcode>=0&&intcode<=128){
totallength =totallength+1;
}else{
totallength = totallength+2;
}
}
if(totallength<9){
$('.progress_bar_other:eq('+i+') a').text(winner);
}else{
var totallengthcopy=0;
var newname = new Array();
for(var m=0;m<winner.length;m++){
var intcodecopy = winner.charCodeAt(m);
if(intcodecopy>=0&&intcodecopy<=128&&totallengthcopy<9){
totallengthcopy =totallengthcopy+1;
newname = newname + winner[m];
}else if(totallengthcopy<9){
newname = newname + winner[m];
totallengthcopy = totallengthcopy+2;
}
}
$('.progress_bar_other:eq('+i+') a').text(newname+'...');
}
}
})
</script>
</html>