jQuery: Modifier var en cliquant sur

Question

J'ai une barre de progression circulaire et je veux la mettre à jour (et sa portée avec les valeurs) en cliquant sur un div. Le clic doit ajouter la valeur d'une entrée à un var. J'ai créé un petit aperçu de ceci. Mon problème est le var ne semble pas changer en cliquant. Quelqu'un peut-il aider? Merci!

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) De plus, s'il est possible que je voudrais réinitialiser ce var (calories) à 0 toutes les 24 heures, vous pouvez voir ma tentative pitoyable à cela dans un commentaires dans le code js .. Si vous pouvez me aider, ce serait génial aussi :)

Answer 1

Vous devez mettre à jour les variables déclarées en haut à chaque fois que vous cliquez sur le bouton de validation.

En outre, vous devez analyser la valeur de la zone de saisie et appeler circleProgress() avec tous les paramètres nécessaires pour redessiner le contenu du cercle. La façon dont vous avez maintenant, il n'y a pas de paramètres.

Quelque chose comme ce qui suit pour vous aider à démarrer: 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

dans votre violon j'ai ajouté ...

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

Et il réinitialiser toutes les 5 secondes avec l'animation. Sans tenir compte des 5 secondes contre 24 heures, est-ce que c'est ce que vous cherchez?

Answer 3

Pour répondre à vos calories reset question variable vous Assumning voulez réinitialiser tous les 10 heures, Essayez:

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

Let Je sais comment ça marche. (Ne votez pas en bas, tout de suite) Amusez-vous à coder ;-).