大概实现思路就是用一张灰色的星星作为背景，然后让有颜色的星星图片定位在灰色的星星图片上，控制有颜色星星图片的宽度即可达到基本效果。如下图：
下面上代码：
<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中文网其它相关文章！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一篇：Js完成倒计时时差效果
下一篇：关于JS中递归删除数组中元素的方法详解
