這篇文章主要為大家詳細介紹了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>
<p class="starnone">
<p class="starWrap">
<p class="star" id="star"></p>
</p>
</p>
<p>
<input type="text" id="num"> %
<button id="ok">OK</button>
</p>
<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>用到的兩張圖片。
【相關推薦】
4. Js完成倒數計時時差效果
以上是JS完成星級評分功能的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
