JS實(shí)現(xiàn)評(píng)價(jià)的星星功能
剛開(kāi)始接觸寫星星評(píng)價(jià)時(shí),哇!估計(jì)腦子剛被驢踢了,竟然想到了最笨的辦法-手工畫五角星。媽呀! css樣式都寫了好大一串,還沾沾自喜終于畫出來(lái)了,然后瞅一瞅旁邊的妹子寫得怎么樣了,哇!人家機(jī)智的!直接用符號(hào)★就解決了!?。“?,智商捉急呀!
先上圖看看吧:
雖然簡(jiǎn)單,還是有幾個(gè)注意的地方:
1. 未點(diǎn)擊時(shí)的hover效果,星星會(huì)隨鼠標(biāo)移動(dòng)亮起來(lái)喔。
2. 點(diǎn)擊后關(guān)閉hover效果。
3. 點(diǎn)擊同一顆星星,星星可以隨時(shí)換色。
具體代碼展示:
<!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() { //為星星設(shè)置hover效果 var isClicked = false; var beforeClickedIndex = -1; var clickNum = 0; //點(diǎn)擊同一顆星次數(shù) $('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'); } } ); //星星點(diǎn)擊事件 $('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) { //兩次點(diǎn)擊同一顆星星 該星星顏色變化 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>
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)評(píng)價(jià)的星星功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
- JS實(shí)現(xiàn)星星評(píng)分功能實(shí)例代碼(兩種方法)
- js點(diǎn)亮星星評(píng)分并獲取參數(shù)的js代碼
- js星星評(píng)分效果
- js實(shí)現(xiàn)星星打分效果的方法
- js實(shí)現(xiàn)的星星評(píng)分功能函數(shù)
- javascript+css好多網(wǎng)站用的選星星實(shí)現(xiàn)打分功能的函數(shù)
- js實(shí)現(xiàn)飛入星星特效代碼
- AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能
- javascript實(shí)現(xiàn)隨機(jī)顯示星星特效
- js實(shí)現(xiàn)星星閃特效
相關(guān)文章
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕后變灰避免多次重復(fù)提交
注冊(cè)的時(shí)候需要發(fā)送驗(yàn)證激活帳號(hào)的郵件,為了避免郵件的多次重復(fù)發(fā)送,所以可以在點(diǎn)擊了發(fā)送后,設(shè)置按鈕變灰,倒計(jì)時(shí)一段時(shí)間后又可重復(fù)點(diǎn)擊,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-07-07js對(duì)象合并的4種方式與數(shù)組合并的4種方式
這篇文章主要介紹了js對(duì)象合并的4種方式與數(shù)組合并的4種方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10JavaScript, select標(biāo)簽元素左右移動(dòng)功能實(shí)現(xiàn)
這篇文章主要介紹了JavaScript, select標(biāo)簽元素左右移動(dòng)功能實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05javascript設(shè)計(jì)模式 – 享元模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 享元模式,結(jié)合實(shí)例形式分析了javascript享元模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08JS實(shí)現(xiàn)網(wǎng)頁(yè)搶購(gòu)功能(觸發(fā),終止腳本)
小編通過(guò)一個(gè)網(wǎng)頁(yè)式的搶購(gòu)功能的實(shí)現(xiàn)給大家講解一下JS如何觸發(fā)和終止腳本來(lái)完成這個(gè)任務(wù)。2017-11-11JavaScript中clientWidth,offsetWidth,scrollWidth的區(qū)別
這篇文章主要介紹了Element中clientWidth,offsetWidth,scrollWidth的區(qū)別,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2021-01-01bootstrap制作jsp頁(yè)面(根據(jù)值讓table顯示選中)
這篇文章主要為大家詳細(xì)介紹了bootstrap做的jsp頁(yè)面,根據(jù)值讓table顯示選中,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01JavaScript判斷textarea值是否為空并給出相應(yīng)提示
假如用戶沒(méi)有輸入數(shù)據(jù)則給出相應(yīng)提示,那么該如何來(lái)判斷呢?下面以判斷textarea值是否為空為例2014-09-09