zoukankan      html  css  js  c++  java
  • 回忆之星星评分

    直接看效果点这里

    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
  • 相关阅读:
    this与$(this)的区别
    子元素筛选选择器
    内容筛选选择器
    基本筛选选择器
    jQuery对象与DOM对象及互相转化
    【题解】保安站岗[P2458]皇宫看守[LOJ10157][SDOI2006]
    【学习笔记】薛定谔的喵咪Cat—球盒问题(全详解)
    【题解】二逼平衡树 [P3380] [BZOJ3196] [Tyvj1730]
    【题解】TES-Intelligence Test
    【题解】自行车比赛 [AHOI2016] [P2777]
  • 原文地址:https://www.cnblogs.com/jununx/p/4473332.html
Copyright © 2011-2022 走看看