本文主要是介绍java前端实现打星评价_JS实现评价的星星功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
刚开始接触写星星评价时，哇！估计脑子刚被驴踢了，竟然想到了最笨的办法-手工画五角星。妈呀！ css样式都写了好大一串，还沾沾自喜终于画出来了，然后瞅一瞅旁边的妹子写得怎么样了，哇！人家机智的！直接用符号★就解决了！！！唉，智商捉急呀！
先上图看看吧：
虽然简单，还是有几个注意的地方：
1. 未点击时的hover效果，星星会随鼠标移动亮起来喔。
2. 点击后关闭hover效果。
3. 点击同一颗星星，星星可以随时换色。
具体代码展示：
.stars{
white-space: nowrap;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.stars li{
display: inline-block;
color: #ADADAD;
font-size: 40px;
}
- ★
- ★
- ★
- ★
- ★
$(function() {
//为星星设置hover效果
var isClicked = false;
var beforeClickedIndex = -1;
var clickNum = 0; //点击同一颗星次数
$('li').hover(
function() {
if(!isClicked) {
$(this).css('color', '#F0AD4E');
var index = $(this).index();
for(var i = 0; 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 = 1; i <= index+1; i++) {
$('li:nth-child(' + i + ')').css('color', '#F0AD4E');
}
if(index == beforeClickedIndex) { //两次点击同一颗星星 该星星颜色变化
clickNum++;
if(clickNum % 2 == 1) {
$('li:nth-child(' + (index + 1) + ')').css('color', '#ADADAD');
} else {
$('li:nth-child(' + (index + 1) + ')').css('color', '#F0AD4E');
}
} else {
clickNum = 0;
beforeClickedIndex = index;
}
});
});
总结
以上所述是小编给大家介绍的JS实现评价的星星功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
这篇关于java前端实现打星评价_JS实现评价的星星功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
