直接看效果点这里
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 星星评分 </title>
<link rel="stylesheet" href="star.css"/>
</head>
<body>
<ul class="m-star" id="J_Star">
<li>
<dl>
<dt>总评：</dt>
<dd><b class="num">100</b>分</dd>
</dl>
</li>
<li>
<dl>
<dt>特色：</dt>
<dd class="list">
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt>画面：</dt>
<dd class="list">
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt>战斗：</dt>
<dd class="list">
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt>操作：</dt>
<dd class="list">
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt>玩法：</dt>
<dd class="list">
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
<span class="item selected">☆</span>
</dd>
</dl>
</li>
</ul>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="star.js"></script>
</body>
</html>
CSS
/* m-star */
html, body, ul, dl, dt, dd { margin: 0; padding: 0; }
li { list-style: none; }
.m-star { width: 160px; padding: 10px; margin: 10px auto; background-color: #04327f; color: #e5cd9a; font-size: 12px; }
.m-star .num { color: #ff0000; font-size: 18px; padding-right: 3px; }
.m-star dl { overflow: hidden; line-height: 24px; }
.m-star dt,.m-star dd { float: left; }
.m-star dd .item { float: left; font-size: 16px; padding-right: 5px; color: #999; cursor: pointer; }
.m-star dd .selected { color: #ebcd18; }
JS
// 分数计算
function calcScores(){
var num = 100,
oStar = $(‘#J_Star‘),
iItemLen = oStar.find(‘.item‘).length,
iSelectedLen = oStar.find(‘.selected‘).length;
num = parseInt(num * (iSelectedLen / iItemLen), 10);
return num;
}
// 星星选择
$(‘#J_Star .list .item‘).bind(‘click, mouseover‘, function(){
$(this).addClass(‘selected‘)
.siblings(‘.item‘).removeClass(‘selected‘)
.slice(0, $(this).index()).addClass(‘selected‘);
$(‘#J_Star .num‘).text(calcScores());
});
时间： 2024-10-10 04:14:14