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にこのVAR（カロリー）をリセットしたいことも可能だ場合、あなたはAでこれで私の哀れな試みを見ることができますjsのコード内のコメント..あなたはそれで私を助けることができるならば、それはあまりにも素晴らしいだろう:)

Answer 1

送信チェックマークボタンをクリックするたびに、先頭に宣言された変数を更新する必要があります。

また、入力ボックスの値を解析する必要があります。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秒と24時間を無視すると、これはあなたの後のことですか？

Answer 3

は、あなたがそれをすべての午前10時をリセットしたいAssumning、あなたリセットカロリー を変数質問に答えるために、 試してみてください。次の作業を開始するよう

何か

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;}), 

レッツ私はそれがどのように動作するかを知っています。