星星评分 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #list {
                width: 350px;
                text-align: center;
                position: absolute;
                top: 70px;
                left: 50%;
                margin-left: -200px;
            }
            
            #list a {
                display: inline-block;
                width: 20px;
                height: 15px;
                background-color: goldenrod;
                border-radius: 3px;
                font-size: 12px;
                text-align: center;
                line-height: 15px;
                color: #fff;
                text-decoration: none;
                float: left;
                margin: 3px;
            }
        </style>
    </head>
    <body>
        <div style="margin: 50px auto;width: 200px;" id="pingfen"></div>
        <div id="list">
            <span style="float: left">评分：</span>
            <a href="javascript:;">0</a>
            <a href="javascript:;">0.5</a>
            <a href="javascript:;">1</a>
            <a href="javascript:;">1.5</a>
            <a href="javascript:;">2</a>
            <a href="javascript:;">2.5</a>
            <a href="javascript:;">3</a>
            <a href="javascript:;">3.5</a>
            <a href="javascript:;">4</a>
            <a href="javascript:;">4.5</a>
            <a href="javascript:;">5</a>
        </div>
        <div class="grade"></div>
        <script src="Demo02/Demo02/js/jquery.min.js"></script>
        <script>
            var alist = $('#list a');
            for(var i =0; i < alist.length; i++){
                $('#list a').click(function(){
                    var txtf = $(this).text();
                    $('#pingfen').html(pinfen(txtf));
                })
            }
            
            $('#pingfen').html(pinfen(0));            
            function pinfen(num){
                var html = "";
                for(var i = 0; i < 5; i++){
                    if(num < 5 || num > 0){
                        if(i < parseInt(num)){
                            html += '<img src="Demo02/Demo02/img/manxing.png" />';
                        }else if(num - i > 0){
                            html += '<img src="Demo02/Demo02/img/banxing.png" />';                            
                        }else{
                            html += '<img src="Demo02/Demo02/img/kongxing.png" />';                                                        
                        }
                    }
                }
                return html;
            }

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

 

 posted on 2016-07-08 10:25  zenghan  阅读(131)  评论(0)    收藏  举报