HTML代码
<div style="margin-top:20px">
<span class="glyphicon glyphicon-star" style="font-size: 32px; color: red" onclick="Star(0)" id="star"></span>
<span class="glyphicon glyphicon-star" style="font-size: 32px; color: red" onclick="Star(1)"></span>
<span class="glyphicon glyphicon-star" style="font-size: 32px; color: red" onclick="Star(2)"></span>
<span class="glyphicon glyphicon-star" style="font-size: 32px; color: red" onclick="Star(3)"></span>
<span class="glyphicon glyphicon-star" style="font-size: 32px; color: red" onclick="Star(4)"></span>
<span class="glyphicon glyphicon-star-empty" style="font-size: 32px; color: Gold; " onclick="Star(0)"></span>
<span class="glyphicon glyphicon-star-empty" style="font-size: 32px; color: Gold; " onclick="Star(1)"></span>
<span class="glyphicon glyphicon-star-empty" style="font-size: 32px; color: Gold; " onclick="Star(2)"></span>
<span class="glyphicon glyphicon-star-empty" style="font-size: 32px; color: Gold; " onclick="Star(3)"></span>
<span class="glyphicon glyphicon-star-empty" style="font-size: 32px; color: Gold; " onclick="Star(4)"></span>
<br>
<input name="Score" />
</div>
js代码
<script>
window.onload = function () {
var star = $(".glyphicon");
for (var i = 0; i < 5; i++) {
star.eq(i).hide();
}
}
function Star(num)
{
var star = $(".glyphicon");
for (var i = 0; i < num + 1; i++)
{
star.eq(i).show();
}
for(var i = num + 1; i < 6;i++)
{
star.eq(i).hide();
}
for (var i = 5; i < 6 + num; i++) {
star.eq(i).hide();
}
for (var i = num + 6 ; i < 11; i++)
{
star.eq(i).show();
}
}
</script>