剛開始接觸寫星星評價時，哇！估計腦子剛被驢踢了，竟然想到了最笨的辦法-手工畫五角星。媽呀！ css樣式都寫了好大一串，還沾沾自喜終于畫出來了，然後瞅一瞅旁邊的妹子寫得怎麼樣了，哇！人家機智的！直接用符号★就解決了！！！唉，智商捉急呀！
先上圖看看吧：
雖然簡單，還是有幾個注意的地方：
1. 未點選時的hover效果，星星會随滑鼠移動亮起來喔。
2. 點選後關閉hover效果。
3. 點選同一顆星星，星星可以随時換色。
具體代碼展示：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<style type="text/css">
.stars{
white-space: nowrap;
text-align: center;
margin-top: px;
margin-bottom: px;
}
.stars li{
display: inline-block;
color: #ADADAD;
font-size: px;
}
</style>
<body>
<ul class="stars">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<script src="../../js/common/jquery-git.js"></script>
<script>
$(function() {
//為星星設定hover效果
var isClicked = false;
var beforeClickedIndex = -;
var clickNum = ; //點選同一顆星次數
$('li').hover(
function() {
if(!isClicked) {
$(this).css('color', '#F0AD4E');
var index = $(this).index();
for(var i = ; i <= index; i++) {
$('li:nth-child(' + i + ')').css('color', '#F0AD4E');
}
}
},
function() {
if(!isClicked) {
$('li').css('color', '#ADADAD');
}
}
);
//星星點選事件
$('li').click(function() {
$('li').css('color', '#ADADAD');
isClicked = true;
var index = $(this).index();
for(var i = ; i <= index+; i++) {
$('li:nth-child(' + i + ')').css('color', '#F0AD4E');
}
if(index == beforeClickedIndex) { //兩次點選同一顆星星 該星星顔色變化
clickNum++;
if(clickNum % == ) {
$('li:nth-child(' + (index + ) + ')').css('color', '#ADADAD');
} else {
$('li:nth-child(' + (index + ) + ')').css('color', '#F0AD4E');
}
} else {
clickNum = ;
beforeClickedIndex = index;
}
});
});
</script>
</body>
</html>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)