js仿淘宝评价评分功能
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
本文主要介绍了js仿淘宝评价评分功能——点击心形生成得分（有半心选择），具有很好的参考价值，狼蚁网站SEO优化跟着长沙网络推广一起来看下吧
效果图：
图（1）初始图
图（2）点击效果
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>文件上传</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<style>
/*评分*/
ul{
height: 20px;
}
li{
list-style: none;
float: left;
width: 15px;
height: 20px;
}
.leftHeart{
background: url('http://cdn.attach.qdfuns.com/notes/pics/201702/28/145751uq6u6vfsnsvdbqbp.png') no-repeat bottom left;
}
.rightHeart{
background: url('http://cdn.attach.qdfuns.com/notes/pics/201702/28/145751crdjmidtdy4rmm1t.png') no-repeat bottom left;
}
.score{
font-size: 22px;
font-weight: bolder;
color: #ff0000;
}
</style>
</head>
<body onload="init()">
<!-- 评分 -->
<ul>
<li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
<li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
<li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
<li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
<li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
得分：<span class="score"></span>
</ul>
<script>
$('.halfHeart:odd').css('padding-right', '5px');
var ifHover = true,
ifClick = true;
$('.halfHeart').mouseover(function(){
if (ifHover) {
for (var i = 0; i <= $(this).index(); i++) {
$('.halfHeart').eq(i).css('background-position', 'top left');
}
$('.score').text(($(this).index()+1) * 0.5);
}
})
$('.halfHeart').mouseout(function(){
if (ifHover) {
for (var i = 0; i <= $(this).index(); i++) {
$('.halfHeart').eq(i).css('background-position', 'bottom left');
}
}
})
$('.halfHeart').click(function(){
if (ifClick) {
ifHover = false;
ifClick = false;
for (var i = 0; i <= $(this).index(); i++) {
$('.halfHeart').eq(i).css('background-position', 'top left');
}
$('.score').text(($(this).index()+1) * 0.5);
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持狼蚁SEO！