JS實現評價的星星功能
剛開始接觸寫星星評價時,哇!估計腦子剛被驢踢了,竟然想到了最笨的辦法-手工畫五角星。媽呀! 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>
總結
以上所述是小編給大家介紹的JS實現評價的星星功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
相關文章
JavaScript, select標簽元素左右移動功能實現
這篇文章主要介紹了JavaScript, select標簽元素左右移動功能實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05javascript設計模式 – 享元模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 享元模式,結合實例形式分析了javascript享元模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實現方法
下面小編就為大家?guī)硪黄猨s判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實現方法。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08JavaScript中clientWidth,offsetWidth,scrollWidth的區(qū)別
這篇文章主要介紹了Element中clientWidth,offsetWidth,scrollWidth的區(qū)別,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2021-01-01bootstrap制作jsp頁面(根據值讓table顯示選中)
這篇文章主要為大家詳細介紹了bootstrap做的jsp頁面,根據值讓table顯示選中,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01JavaScript判斷textarea值是否為空并給出相應提示
假如用戶沒有輸入數據則給出相應提示,那么該如何來判斷呢?下面以判斷textarea值是否為空為例2014-09-09