js寫評價的星星

本文轉載自查看原文 2019-08-20 14:11 434 HTML+DIV+CSS

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

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

先上圖看看吧：

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

具體代碼展示：

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 關於淘寶上星星評價如何做出來的 JS---星星評分 JS實現星級評價原生js實現星星閃爍的效果 html 頁面的星星閃爍特效背景（js案例） p5.js基本[一] T型高斯分布的小星星 js 寫類的方法原生js寫Ajax 博客園js+css 頁面加入一點小樣式小星星 + 漂亮妹子《星星之卵》讀后隨筆