jQuery : 单击时更改变量

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

在你的 fiddle 我添加了...

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

它每 5 秒重置一次动画。抛开5秒和24小时，这是你想要的吗？

Answer 2

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

此外，您应该对输入框中的值进行 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 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;}),

让我知道它是如何工作的。（暂时不要投票）祝你编码愉快 ;-) 。

jQuery : 单击时更改变量

jQuery : Change var when clicking

jquery

progress-bar

reset

var