JS打多个类型星级评分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>javascript星级评分</title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.wrapper
{
height: 20px;
padding: 5px;
width: 130px;
margin: 100px auto 10px;
}
.wra
{
height: 20px;
padding: 5px;
width: 130px;
margin: 100px auto 10px;
}
a
{
float: left;
width: 26px;
height: 20px;
background: url(img/star.png) 0 -20px no-repeat;
}
p
{
font: 24px SimSun;
width: 130px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="a1" class="wrapper">
<a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
<a href="javascript:;"></a><a href="javascript:;"></a>
</div>
<p id="p1">
</p>
<div id="a2" class="wrapper">
<a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
<a href="javascript:;"></a><a href="javascript:;"></a>
</div>
<p id="p2">
</p>
<div id="a3" class="wrapper">
<a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
<a href="javascript:;"></a><a href="javascript:;"></a>
</div>
<p id="p3">
</p>
<div id="a4" class="wrapper">
<a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
<a href="javascript:;"></a><a href="javascript:;"></a>
</div>
<p id="p4">
</p>
</body>
</html>
<script type="text/javascript">
$(function () {
var objs = $(".wrapper a");
$(objs).mouseover(function () {
var ix = $(this).index();
sets(ix, this);
});
$(objs).mouseout(function () {
var ix = $(this).parent().attr("rel");
if (ix == undefined)
ix = -1;
sets(ix, this);
});
$(objs).click(function () {
var ix = $(this).index();
$(this).parent().next("p").html((ix + 1) + ‘ 颗星‘);
$(this).parent().attr("rel", ix);
sets(ix, this);
});
});
function sets(ix, obj) {
$(obj).parent().children().each(function (ik) {
if (ik <= ix) {
$(this).css("backgroundPosition", ‘0 0‘);
} else {
$(this).css("backgroundPosition", ‘0 -20px‘);
}
});
}
</script>
单个星级评分（纯JS)：
<script type="text/javascript">
window.onload = function () {
var star = document.getElementById(‘a1‘).getElementsByTagName(‘a‘);
var temp = 0;
for (var i = 0, len = star.length; i < len; i++) {
star[i].index = i;
star[i].onmouseover = function () {
clear();
for (var j = 0; j < this.index + 1; j++) {
star[j].style.backgroundPosition = ‘0 0‘;
}
}
star[i].onmouseout = function () {
for (var j = 0; j < this.index + 1; j++) {
star[j].style.backgroundPosition = ‘0 -20px‘;
}
current(temp);
}
star[i].onclick = function () {
temp = this.index + 1;
document.getElementById(‘p1‘).innerHTML = temp + ‘ 颗星‘;
current(temp);
}
}
//清除所有
function clear() {
for (var i = 0, len = star.length; i < len; i++) {
star[i].style.backgroundPosition = ‘0 -20px‘;
}
}
//显示当前第几颗星
function current(temp) {
for (var i = 0; i < temp; i++) {
star[i].style.backgroundPosition = ‘0 0‘;
}
}
};
</script>
时间： 2024-11-08 03:45:29