Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Рйтинг звезд + progress bar circle (https://javascript.ru/forum/misc/66767-rjjting-zvezd-progress-bar-circle.html)

Sokoljr 09.01.2017 14:13
Рйтинг звезд + progress bar circle
 
Добрый день, столкнулся с такой проблемой
Есть Круговой прогресс бар, и 5 звезд, при нажатии на 1 звезду соответственно 20% на баре должно показывать и так далее

есть бар и есть звезды, как слепить воедино - не доходит

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<style>
.rait_wrapp .circle {
  background-color: #cfcfcf;
  width: 120px;
  height: 120px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  position: relative;
}
.rait_wrapp .circle .circle1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  clip: rect(0px, 120px, 120px, 60px);
}
.rait_wrapp .circle .circle1 .slice1 {
  position: absolute;
  width: 120px;
  height: 120px;
  clip: rect(0px, 60px, 120px, 0px);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-color: #ff8a20;
  border-color: #ff8a20;
  -moz-transform: rotate(0);
  -webkit-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}
.rait_wrapp .circle .circle2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  clip: rect(0, 60px, 120px, 0px);
}
.rait_wrapp .circle .circle2 .slice2 {
  position: absolute;
  width: 120px;
  height: 120px;
  clip: rect(0px, 120px, 120px, 60px);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-color: #ff8a20;
  border-color: #ff8a20;
  -moz-transform: rotate(0);
  -webkit-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}
.rait_wrapp .circle .status {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  padding-top: 13px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-family: "Source Sans Pro", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 25px;
  text-align: center;
  color: #4e4e4e;
  line-height: 50px;
  background: #fff;
}
.rait_wrapp .stars {
  display: inline-block;
  margin: 10px 0;
}
.rait_wrapp .stars input:checked + label {
  border: none;
  background: inherit;
}
.rait_wrapp .stars input {
  display: none;
}
.rait_wrapp .stars label {
  float: right;
  padding: 3px;
  font-size: 18px;
  color: #cfcfcf;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  border: none;
  background: inherit;
}
.rait_wrapp .stars input.star:checked ~ label.star:before {
  content: '\f005';
  color: #ff8a20;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
}
.rait_wrapp .stars input.star-5:checked ~ label.star:before {
  color: #ff8a20;
  text-shadow: 0 0 20px #ff8a20;
}
.rait_wrapp .stars input.star-1:checked ~ label.star:before {
  color: #ff8a20;
}
.rait_wrapp .stars label.star:hover {
  transform: rotate(15deg) scale(1.3);
  color: #ff8a20;
}
.rait_wrapp .stars label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}
</style>
	<div class="rait_wrapp">
		<div class="circle">
			<div class="circle1">
				<div class="slice1"></div>
			</div>
		<div class="circle2">
			<div class="slice2"></div>
		</div>
	        <div class="status"></div>
	</div>
	<div class="stars">
		<form action="">
			<input class="star star-5" id="star-5" type="radio" name="star"/>
			<label class="star star-5" for="star-5"></label>
			<input class="star star-4" id="star-4" type="radio" name="star"/>
			<label class="star star-4" for="star-4"></label>
			<input class="star star-3" id="star-3" type="radio" name="star"/>
			<label class="star star-3" for="star-3"></label>
			<input class="star star-2" id="star-2" type="radio" name="star"/>
			<label class="star star-2" for="star-2"></label>
			<input class="star star-1" id="star-1" type="radio" name="star"/>
			<label class="star star-1" for="star-1"></label>
		</form>
	</div>
<script>
$(document).ready(function () {
    var bar = $('.circle');
    progressBarUpdate(37, 100, bar);
});

function rotate(element, degree) {
    element.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-ms-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)',
            'zoom': 1
    });
}

function progressBarUpdate(x, outOf, elem) {
    var firstHalfAngle = 180;
    var secondHalfAngle = 0;
    var drawAngle = x / outOf * 360;
    if (drawAngle <= 180) {
        firstHalfAngle = drawAngle;
    } else {
        secondHalfAngle = drawAngle - 180;
    }
    rotate(elem.find(".slice1"), firstHalfAngle);
    rotate(elem.find(".slice2"), secondHalfAngle);
    elem.find(".status").html(x + "<span>%</span>");
}
</script>
</body>
</html>

ksa 09.01.2017 15:11
Цитата:
Сообщение от Sokoljr
есть бар и есть звезды, как слепить воедино
Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.rait_wrapp .circle {
  background-color: #cfcfcf;
  width: 120px;
  height: 120px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  position: relative;
}
.rait_wrapp .circle .circle1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  clip: rect(0px, 120px, 120px, 60px);
}
.rait_wrapp .circle .circle1 .slice1 {
  position: absolute;
  width: 120px;
  height: 120px;
  clip: rect(0px, 60px, 120px, 0px);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-color: #ff8a20;
  border-color: #ff8a20;
  -moz-transform: rotate(0);
  -webkit-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}
.rait_wrapp .circle .circle2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  clip: rect(0, 60px, 120px, 0px);
}
.rait_wrapp .circle .circle2 .slice2 {
  position: absolute;
  width: 120px;
  height: 120px;
  clip: rect(0px, 120px, 120px, 60px);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-color: #ff8a20;
  border-color: #ff8a20;
  -moz-transform: rotate(0);
  -webkit-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}
.rait_wrapp .circle .status {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  padding-top: 13px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-family: "Source Sans Pro", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 25px;
  text-align: center;
  color: #4e4e4e;
  line-height: 50px;
  background: #fff;
}
.rait_wrapp .stars {
  display: inline-block;
  margin: 10px 0;
}
.rait_wrapp .stars input:checked + label {
  border: none;
  background: inherit;
}
.rait_wrapp .stars input {
  display: none;
}
.rait_wrapp .stars label {
  float: right;
  padding: 3px;
  font-size: 18px;
  color: #cfcfcf;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  border: none;
  background: inherit;
}
.rait_wrapp .stars input.star:checked ~ label.star:before {
  content: '\f005';
  color: #ff8a20;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
}
.rait_wrapp .stars input.star-5:checked ~ label.star:before {
  color: #ff8a20;
  text-shadow: 0 0 20px #ff8a20;
}
.rait_wrapp .stars input.star-1:checked ~ label.star:before {
  color: #ff8a20;
}
.rait_wrapp .stars label.star:hover {
  transform: rotate(15deg) scale(1.3);
  color: #ff8a20;
}
.rait_wrapp .stars label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}
</style>
<script type='text/javascript'>
$(function (){
	$('label.star').click(function(){
		var i=$('label.star').index($(this));
		i=(5-i)*20;
		var bar = $('.circle');
		progressBarUpdate(i, 100, bar);
	});
});
function rotate(element, degree) {
    element.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-ms-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)',
            'zoom': 1
    });
};
function progressBarUpdate(x, outOf, elem) {
    var firstHalfAngle = 180;
    var secondHalfAngle = 0;
    var drawAngle = x / outOf * 360;
    if (drawAngle <= 180) {
        firstHalfAngle = drawAngle;
    } else {
        secondHalfAngle = drawAngle - 180;
    }
    rotate(elem.find(".slice1"), firstHalfAngle);
    rotate(elem.find(".slice2"), secondHalfAngle);
    elem.parent().find(".status").html(x + "<span>%</span>");
};
</script>
</head>
<body>
	<div class="rait_wrapp">
		<div class="circle">
			<div class="circle1">
				<div class="slice1"></div>
			</div>
		<div class="circle2">
			<div class="slice2"></div>
		</div>
	    <div class="status"></div>
	</div>
	<div class="stars">
		<form action="">
			<input class="star star-5" id="star-5" type="radio" name="star"/>
			<label class="star star-5" for="star-5"></label>
			<input class="star star-4" id="star-4" type="radio" name="star"/>
			<label class="star star-4" for="star-4"></label>
			<input class="star star-3" id="star-3" type="radio" name="star"/>
			<label class="star star-3" for="star-3"></label>
			<input class="star star-2" id="star-2" type="radio" name="star"/>
			<label class="star star-2" for="star-2"></label>
			<input class="star star-1" id="star-1" type="radio" name="star"/>
			<label class="star star-1" for="star-1"></label>
		</form>
	</div>
</body>
</html>


Часовой пояс GMT +3, время: 23:37.