js实现星级评分效果（非常规5个li代码）
生活随笔
收集整理的這篇文章主要介紹了
js实现星级评分效果（非常规5个li代码）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 前言
此方案受到JS單行寫一個評級組件啟發，自己寫了一個簡單Demo。
功能有正常滑動，動態顯示實心星星個數；當點擊確認，則保持當前的實心星星個數；再移動時未點擊，則離開后還是保持之前的狀態。
此demo沒有文字信息等提示，可以根據需要自行添加使用。
2. 代碼
<!DOCTYPE html> <html> <head><title>Star Rating</title><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">var lastStarNum =0;function mOut(obj){obj.innerHTML="★★★★★☆☆☆☆☆".slice(5-lastStarNum,10-lastStarNum);}function mOver(){var obj = document.getElementById("starRate");var offsetTopVal = obj.offsetTop;var pos=getPos(event);//star width is 13.2px,first star is offset 8px from left, near half of star, the star will just become black.//6 is adjust parametervar i = Math.floor((pos.x + 6)/13.2);//star height is 21pxif(i <= 5 & i > 0&& pos.y < offsetTopVal + 21 && pos.y > offsetTopVal){obj.innerHTML="★★★★★☆☆☆☆☆".slice(5-i,10-i);//console.log("MousePage(x,y)=("+pos.x+" ,"+pos.y+") starNumber="+Math.floor((pos.x+6)/13.2));
$(obj).click(function(){lastStarNum = i;})} }$('*').mousemove(function(){mOver();});function getPos(ev){var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}; }</script> </head> <body> <div>Star Rating:</div> <div id="starRate" οnmοuseοver="mOver()" οnmοuseοut="mOut(this)" style="width:66px;height:21px">☆☆☆☆☆</div></body> </html>
3.效果
4. 總結
亮點在于"★★★★★☆☆☆☆☆".slice(5-lastStarNum,10-lastStarNum) 的使用，而不需要網上大多數的星級評分系統那樣是5個li元素，然后加個class來控制。
轉載于:https://www.cnblogs.com/fanbi/p/7596102.html
總結
以上是生活随笔為你收集整理的js实现星级评分效果（非常规5个li代码）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [JSOI 2011]分特产
- 下一篇： 2017软件工程第三次作业--效能分析