得分-星星
代码原创，转载请写明出处
五星级等分--angularjs
1、纯css控制
1）css部分
div{
margin-top: 100px;
display: inline-block;
position:relative;
width: 230px;
height: 100px;
float: left
}
.star_left{
position: absolute;
color: red;
display: inline-block;
border-right: 100px solid transparent;
border-bottom: 70px solid #d9d9d9;
border-left: 100px solid transparent;
transform:rotate(36deg);
-webkit-transform:rotate(36deg);
}
.star_right{
position: absolute;
left:-14px;
display: inline-block;
color: red;
border-right: 100px solid transparent;
border-top: 70px solid #d9d9d9;
border-left: 100px solid transparent;
transform:rotate(144deg);
-webkit-transform:rotate(144deg);
}
.star_top{
position: absolute;
top:-77px;
left:65px;
display: inline-block;
color: red;
border-right: 30px solid transparent;
border-bottom: 100px solid #d9d9d9;
border-left: 30px solid transparent;
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
js部分
var starAPP = angular.module("starAPP",[])
.controller('starController',function($scope){
$scope.change = {
number:null
};
var stars_left = document.getElementsByClassName("star_left")
var stars_top = document.getElementsByClassName("star_top")
var stars_right = document.getElementsByClassName("star_right")
$scope.change = function(num){
for(var j=0;j<stars_left.length;j++){
stars_left[j].style.borderBottom = '70px solid #d9d9d9';
stars_right[j].style.borderTop = '70px solid #d9d9d9';
stars_top[j].style.borderBottom = '100px solid #d9d9d9';
}
if(num <=5 && num>=0){
if(num < 3){
for(var i = 0;i<num;i++){
stars_left[i].style.borderBottom = '70px solid yellow';
stars_right[i].style.borderTop = '70px solid yellow';
stars_top[i].style.borderBottom = '100px solid yellow';
}
}else{
for(var i = 0;i<num;i++){
stars_left[i].style.borderBottom = '70px solid red';
stars_right[i].style.borderTop = '70px solid red';
stars_top[i].style.borderBottom = '100px solid red';
}
}
}
}
})
html部分
<div ng-controller="starController" style="width:100%">
<input type="number" ng-model="change.number" ng-change="change(change.number)">
<div>
<span class="star_left"></span>
<span class="star_right"></span>
<span class="star_top"></span>
</div>
<div>
<span class="star_left"></span>
<span class="star_right"></span>
<span class="star_top"></span>
</div>
<div>
<span class="star_left"></span>
<span class="star_right"></span>
<span class="star_top"></span>
</div>
<div>
<span class="star_left"></span>
<span class="star_right"></span>
<span class="star_top"></span>
</div>
<div>
<span class="star_left"></span>
<span class="star_right"></span>
<span class="star_top"></span>
</div>
</div>
2.SVG
<!doctype>
<html ng-app="starapp">
<head>
<meta charset= "utf-8"/>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var starAPP = angular.module("starapp",[])
.controller('starController',function($scope){
$scope.polygons =document.getElementsByTagName("polygon")
$scope.paths =document.getElementsByTagName("path") ;
$scope.getNumber = function(num){
for(var j = 0; j<5;j++){
$scope.polygons[j].style.fill = "#d9d9d9";
$scope.paths[j].style.fill = "#d9d9d9";
}
if(parseInt(num) < 3){
for(var i=0;i<parseInt(num);i++){
$scope.polygons[i].style.fill = "#ff0";
$scope.paths[i].style.fill = "#ff0";
}
if(num*10 % 10){
if(num*10 % 10 > 4){
$scope.paths[parseInt(num)]. style.fill = "#ff0";
}
}
}else{
for(var i=0;i<parseInt(num);i++){
$scope.polygons[i].style.fill = "#f00";
$scope.paths[i].style.fill = "#f00";
}
if(num*10 % 10){
if(num*10 % 10 > 4){
$scope.paths[parseInt(num)]. style.fill = "#f00";
}
}
}
}
})
</script>
<title></title>
</head>
<body>
<div class="container" ng-controller="starController">
<div>
<input ng-model="showNumber" ng-change="getNumber(showNumber)">
<br>
</div>
<br>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 500" style="border:1px solid; width:500px; height:600px; ">
<polygon points="50,10 60,40 90,40 65,55 75,85 50,60 25,85 35,55 10,40 40,40" style="fill:#d9d9d9;"/>
<path d="M50 10 L50 60 L25 85 L35 55 L10 40 L40 40 L50 10" style="fill:#d9d9d9;"/>
<polygon points="150,10 160,40 190,40 165,55 175,85 150,60 125,85 135,55 110,40 140,40" style="fill:#d9d9d9;"/>
<path d="M150 10 L150 60 L125 85 L135 55 L110 40 L140 40 L150 10" style="fill:#d9d9d9;"/>
<polygon points="250,10 260,40 290,40 265,55 275,85 250,60 225,85 235,55 210,40 240,40" style="fill:#d9d9d9;"/>
<path d="M250 10 L250 60 L225 85 L235 55 L210 40 L240 40 L250 10" style="fill:#d9d9d9;"/>
<polygon points="350,10 360,40 390,40 365,55 375,85 350,60 325,85 335,55 310,40 340,40" style="fill:#d9d9d9;"/>
<path d="M350 10 L350 60 L325 85 L335 55 L310 40 L340 40 L350 10" style="fill:#d9d9d9;"/>
<polygon points="450,10 460,40 490,40 465,55 475,85 450,60 425,85 435,55 410,40 440,40" style="fill:#d9d9d9;"/>
<path d="M450 10 L450 60 L425 85 L435 55 L410 40 L440 40 L450 10" style="fill:#d9d9d9;"/>
</svg>
</div>
</body>
</html>
