JavaScript實現簡單的星星評分效果

2019-11-19 16:33:38

字體：大中小

來源：轉載

供稿：網友

大概實現思路就是用一張灰色的星星作為背景，然后讓有顏色的星星圖片定位在灰色的星星圖片上，控制有顏色星星圖片的寬度即可達到基本效果。如下圖：

下面上代碼：

<html> <head>   <meta charset="UTF-8">   <title>星星</title>   <style>     .starnone,.starWrap{       width: 100px;       height: 20px;     }     .starnone{       position: relative;       background: url(stars-none20px.png) no-repeat;     }     .star{       position: absolute;       top: 0;       left: 0;       width: 70%;       height: 20px;       background: url(stars20px.png) no-repeat;     }     #num{       width: 30px;     }   </style> </head> <body>   <div class="starnone">     <div class="starWrap">       <div class="star" id="star"></div>     </div>   </div>   <div>     <input type="text" id="num"> %     <button id="ok">OK</button>   </div>   <script>     window.onload = function(){       var star = document.getElementById("star");       var okBtn = document.getElementById("ok");       var num = document.getElementById("num");       okBtn.onclick = function(){         var value = parseFloat(num.value);         if (value>100) {           alert("請小于100");           return;         } else if(value<0){           alert("請大于0");           return;         }         star.style.width = value + "px";       }     }   </script> </body> </html>

用到的兩個圖片。