java实现星级评分功能_JS实现星星评分功能实例代码(两种方法)

一、方法1

1、用到图片

2、结构和样式

Document

ul {

padding-left: 0;

overflow: hidden;

}

ul li {

float: left;

list-style: none;

width: 27px;

height: 27px;

background: url(img/star.gif)

}

ul li a {

display: block;

width: 100%;

padding-top: 27px;

overflow: hidden;

}

ul li.light {

background-position: 0 -29px;

}

• 1
• 2
• 3
• 4
• 5

li加了light的class就会变成亮星，就是换了背景位置，把空心的星星变成了实心的。所以js实现的时候点亮就是给li加一个light的类名。

效果：

3、交互js

var num=finalnum = tempnum= 0;

var lis = document.getElementsByTagName("li");

//num:传入点亮星星的个数

//finalnum:最终点亮星星的个数

//tempnum:一个中间值

function fnShow(num) {

finalnum= num || tempnum;//如果传入的num为0，则finalnum取tempnum的值

for (var i = 0; i < lis.length; i++) {

lis[i].className = i < finalnum? "light" : "";/