使用 javascript 實現簡單的星級評分功能，思路很簡單，封裝一個能進行重復調用函數：
當鼠標移入后，遍歷評分div里的子div，然后前兩個子div改變背景為灰色，后面全部為橙色，然后改變對應的評分內容；
當鼠標移出后，使用for循環把子div背景顏色和評分內容恢復初始化狀態；
當鼠標點擊時，依舊前兩個子div改變背景為灰色，后面全部為橙色，然后改變對應的評分內容，並且記錄當前點擊的是第幾個子div，方便在鼠標移入移出后，依舊能固定當前點擊的子div背景顏色和評分內容；如果后期頁面又需要增添多一個新的評分功能，只需要再定義一個評分數組來使用即可，然后傳入對應的數組來進行使用，效果如下：
代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Javascript實現簡單的星級評分功能</title> 6 <style> 7 .content, .content1 { 8 margin-top: 20px; 9 padding-top: 20px; 10 border-top: 1px solid #000; 11 } 12 .red { 13 color: red; 14 } 15 .total-star { 16 font-size: 20px; 17 color: #333; 18 font-weight: 700; 19 } 20 .star { 21 width: 20px; 22 height: 20px; 23 border-radius: 50%; 24 background-color: #ccc; 25 display: inline-block; 26 margin-right: 5px; 27 cursor: pointer; 28 } 29 .stars { 30 color: orange; 31 margin-left: 10px; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="content"> 37 <span class="red">*</span> 38 <span class="total-star">總體評價：</span> 39 <div class="star"></div> 40 <div class="star"></div> 41 <div class="star"></div> 42 <div class="star"></div> 43 <div class="star"></div> 44 <span class="stars">評分</span> 45 </div> 46 <div class="content1"> 47 <span class="red">*</span> 48 <span class="total-star">內容豐富度：</span> 49 <div class="star"></div> 50 <div class="star"></div> 51 <div class="star"></div> 52 <div class="star"></div> 53 <div class="star"></div> 54 <span class="stars">評分</span> 55 </div> 56 57 <script> 58 window.onload=function(){ 59 var oCont = document.getElementsByClassName('content')[0]; 60 var oCont1 = document.getElementsByClassName('content1')[0]; 61 var aText1=['差','較差','好','推薦','力薦']; 62 var aText2=['少','較少','一般','多','很多']; 63 64 //調用函數 65 Stars(oCont,aText1); 66 Stars(oCont1,aText2); 67 68 function Stars(id,Txt){ 69 var index='';//使用這個index來記錄星星被點擊后的等級 70 //獲取元素 71 var aStar = id.getElementsByClassName('star'); 72 var oStars = id.getElementsByClassName('stars')[0]; 73 74 //讓全部星星變灰 75 function gray(){ 76 for(var v=0;v<aStar.length;v++){ 77 aStar[v].style.backgroundColor = '#ccc'; 78 } 79 } 80 81 for(let i=0;i<aStar.length;i++){ 82 83 //設置星星顏色 84 function starColor(){ 85 // 前兩個星星顯示灰色 86 if(i<=1){ 87 gray(); 88 for(let t=0;t<=i;t++){ 89 aStar[t].style.backgroundColor = '#999'; 90 } 91 }else{ 92 //后面星星都顯示橙色 93 gray(); 94 for(let j=0;j<=i;j++){ 95 aStar[j].style.backgroundColor = 'orange'; 96 } 97 } 98 } 99 100 //鼠標移入變換星星顏色 101 aStar[i].onmouseover=function(){ 102 oStars.innerHTML = Txt[i]; 103 starColor(); 104 //鼠標移出變灰，評論等級清空 105 this.onmouseout=function(){ 106 gray(); 107 oStars.innerHTML = '評分'; 108 //這里必須為 === ，否則當index==0時，會進行隱式類型轉換，變成 (index=='') ==> (0=='') ==> (false==false)，直接return出去 109 if(index===''){ 110 return; 111 }else if(index<=1){//通過index重新設置后面鼠標移開后的星星等級 112 for(var n=0;n<=index;n++){ 113 aStar[n].style.backgroundColor = '#999'; 114 } 115 oStars.innerHTML = Txt[index]; 116 }else{ 117 for(var m=0;m<=index;m++){//通過index重新設置后面鼠標移開后的星星等級 118 aStar[m].style.backgroundColor = 'orange'; 119 } 120 oStars.innerHTML = Txt[index]; 121 } 122 } 123 } 124 125 //鼠標點擊固定星星等級和評論等級 126 aStar[i].onclick=function(){ 127 // 關閉移出操作 128 this.onmouseout=null; 129 //星星等級 130 oStars.innerHTML = Txt[i]; 131 if(i<=1){ 132 for(let t=0;t<=i;t++){ 133 aStar[t].style.backgroundColor = '#999'; 134 //獲取當前點擊的是多少等級的星星，讓后面鼠標移開后可以重新設置星星等級 135 index=t; 136 } 137 }else{ 138 for(let j=0;j<=i;j++){ 139 aStar[j].style.backgroundColor = 'orange'; 140 //獲取當前點擊的是多少等級的星星，讓后面鼠標移開后可以重新設置星星等級 141 index=j; 142 } 143 } 144 } 145 } 146 } 147 } 148 </script> 149 </body> 150 </html>