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
  • 相关阅读:
    Jupyter Notebook 编辑器美化
    Python3 与 C# 基础语法对比(List、Tuple、Dict、Set专栏)
    Ubuntu 18.04 安装微信(附企业微信)
    区块链概念
    Python3 与 C# 基础语法对比(String专栏)
    用Python3、NetCore、Shell分别开发一个Ubuntu版的定时提醒(附NetCore跨平台两种发布方式)
    ArchLinux 设置时间同步和硬件时间同步错误 No usable clock interface found
    ArchLinux dwm的安装和配置
    POJ-1182 食物链 并查集(互相关联的并查集写法)
    POJ-2236 Wireless Network 并查集
  • 原文地址:https://www.cnblogs.com/jununx/p/4473332.html
Copyright © 2011-2022 走看看