• 回忆之星星评分


    直接看效果点这里

    HTML

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title> 星星评分 </title>
        <link rel="stylesheet" href="star.css"/>
    </head>
    <body>
    <ul class="m-star" id="J_Star">
        <li>
            <dl>
                <dt>总评:</dt>
                <dd><b class="num">100</b></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>特色:</dt>
                <dd class="list">
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>画面:</dt>
                <dd class="list">
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>战斗:</dt>
                <dd class="list">
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>操作:</dt>
                <dd class="list">
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>玩法:</dt>
                <dd class="list">
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                    <span class="item selected"></span>
                </dd>
            </dl>
        </li>
    </ul>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="star.js"></script>
    </body>
    </html>
    View Code

    CSS

    /* m-star */
    html, body, ul, dl, dt, dd { margin: 0; padding: 0; }
    li { list-style: none; }
    
    .m-star { width: 160px; padding: 10px; margin: 10px auto; background-color: #04327f; color: #e5cd9a; font-size: 12px; }
    .m-star .num { color: #ff0000; font-size: 18px; padding-right: 3px; }
    .m-star dl { overflow: hidden; line-height: 24px; }
    .m-star dt,.m-star dd { float: left; }
    .m-star dd .item { float: left; font-size: 16px; padding-right: 5px; color: #999; cursor: pointer; }
    .m-star dd .selected { color: #ebcd18; }
    View Code

    JS

    // 分数计算
    function calcScores(){
        var num = 100,
            oStar = $('#J_Star'),
            iItemLen = oStar.find('.item').length,
            iSelectedLen = oStar.find('.selected').length;
        num = parseInt(num * (iSelectedLen / iItemLen), 10);
        return num;
    }
    
    // 星星选择
    $('#J_Star .list .item').bind('click, mouseover', function(){
        $(this).addClass('selected')
                .siblings('.item').removeClass('selected')
                .slice(0, $(this).index()).addClass('selected');
    
        $('#J_Star .num').text(calcScores());
    });
    View Code
  • 相关阅读:
    【转】WCF入门教程六[一个简单的Demo]
    【转】WCF入门教程五[WCF的通信模式]
    【转】WCF入门教程四[WCF的配置文件]
    【转】WCF入门教程三[WCF的宿主]
    【转】WCF入门教程二[WCF应用的通信过程]
    【转】WCF入门教程一[什么是WCF]
    【转】浅谈.net remoting 与webservice
    【转】Microsoft .Net Remoting之Remoting事件处理全接触
    egret升级经验记录
    cmder小技巧
  • 原文地址:https://www.cnblogs.com/jununx/p/4473332.html
走看看 - 开发者的网上家园