一个即时排名的demo

最新推荐文章于 2024-04-08 17:48:45 发布

前端要前沿

最新推荐文章于 2024-04-08 17:48:45 发布

阅读量1.6k

点赞数

分类专栏： jQuery学习笔记文章标签：算法

本文链接：https://blog.csdn.net/liangsjss2011/article/details/48438095

版权

jQuery学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

功能：根据输入框输入的内容，实时进行排名，允许有并列排名。
实现方法：两层循环，外层是数组本身，内层是去重的数组。使得每一项都与去重的子数组进行一一比较，从而得出每一项的排名。
细节：验证

<!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>

前端要前沿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个即时排名的demo

功能：根据输入框输入的内容，实时进行排名，允许有并列排名。实现方法：两层循环，外层是数组本身，内层是去重的数组。使得每一项都与去重的子数组进行一一比较，从而得出每一项的排名。细节：验证<!DOCTYPE html ><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><st
复制链接

扫一扫