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

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

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

下面上代碼：

<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>

用到的兩個圖片。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。