js寫評價的星星

時間 2019-11-06

原文原文鏈接

版權聲明：本文爲博主原創文章，遵循 CC 4.0 by-sa 版權協議，轉載請附上原文出處連接和本聲明。
本文連接：https://blog.csdn.net/ouqi_qiou/article/details/77428804css

剛開始接觸寫星星評價時，哇！估計腦子剛被驢踢了，居然想到了最笨的辦法-手工畫五角星。媽呀！ css樣式都寫了好大一串，還沾沾自喜終於畫出來了，而後瞅一瞅旁邊的妹子寫得怎麼樣了，哇！人家機智的！直接用符號★就解決了！！！唉，智商捉急呀！html

先上圖看看吧：jquery

雖然簡單，仍是有幾個注意的地方：
1. 未點擊時的hover效果，星星會隨鼠標移動亮起來喔。
2. 點擊後關閉hover效果。
3. 點擊同一顆星星，星星能夠隨時換色。git

具體代碼展現：this

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <style type="text/css">
        .stars{
            white-space: nowrap;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .stars li{
            display: inline-block;
            color: #ADADAD;
            font-size: 40px;
        }
    </style>

    <body>
        <ul class="stars">
            <li>★</li>
            <li>★</li>
            <li>★</li>
            <li>★</li>
            <li>★</li>
        </ul>
        <script src="../../js/common/jquery-git.js"></script>
        <script>
        $(function() {
                //爲星星設置hover效果
                var isClicked = false;
                var beforeClickedIndex = -1;
                var clickNum = 0; //點擊同一顆星次數

                $('li').hover(
                    function() {
                        if(!isClicked) {
                            $(this).css('color', '#F0AD4E');
                            var index = $(this).index();

                            for(var i = 0; i <= index; i++) {
                                $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
                            }
                        }
                    },
                    function() {
                        if(!isClicked) {
                            $('li').css('color', '#ADADAD');
                        }
                    }
                );

                //星星點擊事件
                $('li').click(function() {
                    $('li').css('color', '#ADADAD');
                    isClicked = true;
                    var index = $(this).index();

                    for(var i = 1; i <= index+1; i++) {
                        $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
                    }
                    if(index == beforeClickedIndex) { //兩次點擊同一顆星星 該星星顏色變化
                        clickNum++;
                        if(clickNum % 2 == 1) {
                            $('li:nth-child(' + (index + 1) + ')').css('color', '#ADADAD');
                        } else {
                            $('li:nth-child(' + (index + 1) + ')').css('color', '#F0AD4E');
                        }

                    } else {
                        clickNum = 0;
                        beforeClickedIndex = index;
                    }
                });
            });
        </script>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。