实现简单的五星效果
思路
1、实现五星推荐的方法有很多，这里只实现半星，主要使用font-awsome图标库，通过库内的fa-star(可填充的星星) fa-star-o(不可填充的空心星星)，fa-star-half-o(半实心)。
值得注意的是，如果直接使用cdn引用font-awsome,注意不同版本可能会有所区别，最新版本可能样式名称有所变化，最好直接使用官网上的版本
js_7">js部分
主要通过js循环得到5颗星星，并在循环中设定条件插入对应的星星
var cur = (1+Math.random()*4).toFixed(1);
console.log(cur);
var stars = "";
for(var i=0;i<5;i++){
var star = '';
if(cur>i) {
if(cur<(i+1)){
star = '<div class="rating-star" style="display:inline-block;font-size: 32px; color: #f1c40f;padding: 5px 10px;"><i class="fa fa-star-half-o" ></i></div>';
}else {
star = '<div class="rating-star" style="display:inline-block;font-size: 32px; color: #f1c40f;padding: 5px 10px;"><i class="fa fa-star" ></i></div>';
}
}else{
star = '<div class="rating-star" style="display:inline-block;font-size: 32px; color: #f1c40f;padding: 5px 10px;"><i class="fa fa-star-o" ></i></div>';
}
stars += star
}
$("body").append('<div class="rating-stars-container"><div class="rating-txt">爽值</div>'+stars+'</div></div>');
css_28">css部分
<style>
.rating-stars-container{
animation:star-blink 1s infinite;
-webkit-animation:star-blink 1s infinite; /*Safari and Chrome*/
}
@keyframes star-blink{
0%{
opacity: 0;
}
50%{
opacity: 1.0;
}
100%{
opacity: 0;
}
}
@-webkit-keyframes star-blink{
0%{
opacity: 0;
}
50%{
opacity: 1.0;
}
100%{
opacity: 0;
}
}
.rating-stars-container .rating-star {
display: inline-block;
font-size: 32px;
color: #f1c40f;
cursor: pointer;
padding: 5px 10px;
}
.rating-txt{
line-height:2rem;
}
.rating-star i{
line-height:2rem;
}
</style>
html部分
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<title>星星</title>
</head>
<body>
