大概實(shí)現(xiàn)思路就是用一張灰色的星星作為背景，然后讓有顏色的星星圖片定位在灰色的星星圖片上，控制有顏色星星圖片的寬度即可達(dá)到基本效果。如下圖：
下面上代碼：
<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>
用到的兩個(gè)圖片。
