您的位置：首页 > 其它

一个即时排名的demo

2015-09-14 13:39 399 查看

功能：根据输入框输入的内容，实时进行排名，允许有并列排名。

实现方法：两层循环，外层是数组本身，内层是去重的数组。使得每一项都与去重的子数组进行一一比较，从而得出每一项的排名。

细节：验证

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{border:0 none;border-spacing: 0;text-align:center;height:30px;line-height: 30px;border-left: 1px solid #CCC;margin:30px auto;text-align: center;}
thead tr{background-color: #CCC;}
tbody td{border-right:1px solid #CCC;padding:5px 20px;border-bottom: 1px solid #CCC;}
tbody input{width:30px;font-size:14px;float:right;margin-right: 5px;}
tbody label{width:30px;font-size:14px;float:left;margin-left: 5px;}

}
</style>
<script type="text/javascript" src="js/jquery.js"></script>

<title>排名</title>
</head>

<body>
<table>
<thead><tr><td>顺位</td><td>总分</td></tr></thead>
<tbody>
<tr>
<td>
<span class="row">5</span>
</td>
<td>
<label class="total">115</label> + <input type="text" class="pscore" maxlength="2" />
</td>
</tr>
<tr>
<td>
<span class="row">8</span>
</td>
<td>
<label class="total">112</label> + <input type="text" class="pscore" maxlength="2" />
</td>
</tr>
<tr>
<td>
<span class="row">6</span>
</td>
<td>
<label class="total">110</label> + <input type="text" class="pscore" maxlength="2" />
</td>
</tr>
<tr>
<td>
<span class="row">5</span>
</td>
<td>
<label class="total">100</label> + <input type="text" class="pscore" maxlength="2" />
</td>
</tr>
<tr>
<td>
<span class="row">0</span>
</td>
<td>
<label class="total">89</label> + <input type="text" class="pscore" maxlength="2" />
</td>
</tr>
</tbody>

</table>
<script type="text/javascript">
$(function(){
$('input').keyup(function(){
var scores=[];
var inputNumbers=$(this).val();
var regInputNum;
if(inputNumbers.length==1){regInputNum=/^[0-9]$/;}
else{regInputNum=/([0-1]{1}\d{1})|20/;}
if(regInputNum.test(inputNumbers)||$(this).val()==''){
$('.pscore').each(function(index,domElm){
var inputScore=$(this).val()==''?0:parseInt($(this).val().replace(/\s/g,''))
var sysScore=parseInt($(this).prev().text());
var totalScore=inputScore+sysScore;
scores.push(totalScore);
})
var gradeg=fnsort(scores);
$('.row').each(function(index,elm){
$(this).text(gradeg[index]);
})
}
else {
alert("必须是20以内的数字")
$(this).val('');
}
})

})
function fnsort(obj){
var grades=[]
var result=simplify(obj);
var len =obj.length;
for(var i=0;i<len;i++){
var grade=-1;
for(var j=0;j<result.length;j++){
if(obj[i]<result[j]){
grade--;
}
}
grades.push(Math.abs(grade));
}
return grades;
}
function simplify(arr) {
var result = [], hash = {};
for (var i = 0, elems; (elems = arr[i]) != null; i++) {
if (!hash[elems]) {
result.push(elems);
hash[elems] = true;
}
}
return result;
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航