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 小时将这个 var（卡路里）重置为 0，你可以在 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 点重置一次， 试试：

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

让我知道它是如何工作的。（暂时不要投反对票）玩得开心编码 ;-)。