У меня есть круговой индикатор выполнения, и я хочу обновить его (и его диапазон со значениями) при нажатии на div. Щелчок должен добавить значение ввода к var. Я создал небольшой превью этого. Моя проблема в том, что var не меняется при нажатии. Кто-нибудь может помочь? Спасибо!
var calories = 1000;
var total = 2500;
var percentage = calories / total;
var pluscal = $('#quantity').val();
var span = $('#today-progress span').html(calories + '/' + total);
/* setInterval(() => {
calories = 0
}, 1000 * 60 * 60 * 24);
var today = new Date().getTime();
localStorage.setItem("today", today); */
$('#confirm-svg').click(function() {
calories = calories + pluscal;
$('#today-progress').circleProgress();
});
$('#today-progress').circleProgress({
value: percentage,
size: 300.0,
startAngle: -1.57,
thickness: 'auto',
fill: {
gradient: ['#CE6363', '#B23939'],
},
emptyFill: '#D6A0A0',
animation: {
duration: 3000,
easing: 'circleProgressEasing'
},
animationStartValue: 0.0,
reverse: false,
lineCap: 'round',
});body {
font-family: Helvetica, sans-serif;
}
#today-progress {
z-index: 0;
position: relative;
top: 10px;
text-align: center;
}
#today-progress span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 45px;
}
svg {
width: 30px;
height: 30px;
margin: 5px 10px;
float: right;
fill: #000;
}
svg:active {
fill: red;
}
form {
margin-top: 20px;
margin-left: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.2/dist/circle-progress.js"></script>
<div id="today-progress">
<span></span>
</div>
<form>
Quantity (between 1 and 1000):
<input type="number" id="quantity" min="1" max="1000">
</form>
<div id="confirm-svg">
<svg id="confirm-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 305.002 305.002" style="enable-background:new 0 0 305.002 305.002;"
xml:space="preserve">
<g>
<g>
<path d="M152.502,0.001C68.412,0.001,0,68.412,0,152.501s68.412,152.5,152.502,152.5c84.089,0,152.5-68.411,152.5-152.5 S236.591,0.001,152.502,0.001z M152.502,280.001C82.197,280.001,25,222.806,25,152.501c0-70.304,57.197-127.5,127.502-127.5 c70.304,0,127.5,57.196,127.5,127.5C280.002,222.806,222.806,280.001,152.502,280.001z"
/>
<path d="M218.473,93.97l-90.546,90.547l-41.398-41.398c-4.882-4.881-12.796-4.881-17.678,0c-4.881,4.882-4.881,12.796,0,17.678 l50.237,50.237c2.441,2.44,5.64,3.661,8.839,3.661c3.199,0,6.398-1.221,8.839-3.661l99.385-99.385 c4.881-4.882,4.881-12.796,0-17.678C231.269,89.089,223.354,89.089,218.473,93.97z"
/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>(JSFiddle здесь) Кроме того, если возможно, я хотел бы сбросить эту переменную (калории) на 0 каждые 24 часа, вы можете увидеть мою жалкую попытку сделать это в комментарии к js-коду. Если вы можете помочь мне с этим, это тоже было бы здорово :)
