JS实现星星评分功能实例代码实现星星评分功能实例代码(两种方法两种方法)
一、方法一、方法1
1、用到图片、用到图片
2、结构和样式、结构和样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
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;
}
</style>
</head>
<body>
<ul>
<li class="light"><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
</body>
</html>
li加了light的class就会变成亮星,就是换了背景位置,把空心的星星变成了实心的。所以js实现的时候点亮就是给li加一个light
的类名。
效果:
3、交互、交互js
<script>
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" : "";//点亮星星就是加class为light的样式
}
}
for (var i = 1; i <= lis.length; i++) {
lis[i - 1].index = i;