jQuery：单击时更改var

Question

我有一个圆形的进度栏，并且想要在点击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 here） 另外，如果有可能，我想重置该变种（卡路里），以每24小时0，你可以在这个在看我可怜的尝试在js代码发表评论。如果你能帮助我与，这将是真棒太:)

Answer 1

您必须更新每次单击提交复选标记按钮时在顶部声明的变量。

此外，你应该parseInt从输入框中的值，你应该打电话circleProgress()与所有必要的设置来重绘圆的东西。你现在的方式，没有设置。

类似下面，让您开始：See JSFiddle here

$('#confirm-svg').click(function() { 
    // Every time you click, you should parse the integer from the input, 
    // then add that to the sum of calories. 
    calories = calories + parseInt($('#quantity').val(), 10); 
    percentage = calories/total; 

    // Then you have to update the calories mark with the new value of calories 
    $('#today-progress span').html(calories + '/' + total); 
    // Then you have to redraw the circle stuff 
    drawCircle() 
}); 

function drawCircle() { 
    $('#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', 
    }); 
} 

// Draw the initial circle 
drawCircle(); 

Answer 2

在你摆弄我加...

setInterval(() => { 
    calories = 0; 
    $('#today-progress').circleProgress(); 
}, 5000); 

然后每5秒用动画重置它。无视5秒vs 24小时，这是你在追求什么？

Answer 3

要回答你的复位卡路里变量的问题， Assumning你希望每次上午10点重置， 尝试：

var now = new Date(); 
    var millisTill10 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 10, 0, 0, 0) - now; 
    if (millisTill10 < 0) { 
     millisTill10 += 86400000; // it's after 10am, try 10am tomorrow. 10 is my number 
    } 
    setTimeout(function(){var calories = 0;}), 

设我知道它是如何工作的（不要贬低投票，只是）有趣的编码;-)。