景点评分星级php代码,JS完成星级评分功能的实例详解

这篇文章主要为大家详细介绍了JavaScript实现简单的星星评分效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

大概实现思路就是用一张灰色的星星作为背景，然后让有颜色的星星图片定位在灰色的星星图片上，控制有颜色星星图片的宽度即可达到基本效果。如下图：

下面上代码：

星星

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

}

%

OK

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

}

}

用到的两个图片。

【相关推荐】