<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#list {
width: 350px;
text-align: center;
position: absolute;
top: 70px;
left: 50%;
margin-left: -200px;
}
#list a {
display: inline-block;
width: 20px;
height: 15px;
background-color: goldenrod;
border-radius: 3px;
font-size: 12px;
text-align: center;
line-height: 15px;
color: #fff;
text-decoration: none;
float: left;
margin: 3px;
}
</style>
</head>
<body>
<div style="margin: 50px auto;width: 200px;" id="pingfen"></div>
<div id="list">
<span style="float: left">评分：</span>
<a href="javascript:;">0</a>
<a href="javascript:;">0.5</a>
<a href="javascript:;">1</a>
<a href="javascript:;">1.5</a>
<a href="javascript:;">2</a>
<a href="javascript:;">2.5</a>
<a href="javascript:;">3</a>
<a href="javascript:;">3.5</a>
<a href="javascript:;">4</a>
<a href="javascript:;">4.5</a>
<a href="javascript:;">5</a>
</div>
<div class="grade"></div>
<script src="Demo02/Demo02/js/jquery.min.js"></script>
<script>
var alist = $('#list a');
for(var i =0; i < alist.length; i++){
$('#list a').click(function(){
var txtf = $(this).text();
$('#pingfen').html(pinfen(txtf));
})
}
$('#pingfen').html(pinfen(0));
function pinfen(num){
var html = "";
for(var i = 0; i < 5; i++){
if(num < 5 || num > 0){
if(i < parseInt(num)){
html += '<img src="Demo02/Demo02/img/manxing.png" />';
}else if(num - i > 0){
html += '<img src="Demo02/Demo02/img/banxing.png" />';
}else{
html += '<img src="Demo02/Demo02/img/kongxing.png" />';
}
}
}
return html;
}
</script>
</body>
</html>
posted on
