Javascript变量不会更新番茄钟 [英] Javascript variables aren't updating pomodoro clock

问题描述

因此，我正在尝试制作Pomodoro时钟，但我的变量无法更新遇到了麻烦.我创建了一些按钮，单击这些按钮可以增加或减少工作时间变量，但是当我调用startTimer函数时，变量workTime仍然是最初设置时的原始值.如何使变量更新为正确的数量.

So, I'm trying to make a Pomodoro clock and am having trouble with my variables not updating. I created buttons that when clicked increase or decrease the Variable for Work Time but when I call my startTimer function my variable workTime is still the original value that it was initially set at. How do I make my variables update to the correct amount.

这里有一个指向我的Codepen的链接. http://codepen.io/jerardov/pen/Xbvbpo

Heres a link to my Codepen. http://codepen.io/jerardov/pen/Xbvbpo

CSS

$(document).ready(function() {

//variables//
workTime = 25;
time = workTime * 60;
breakLength = 5;

//update variables

$(".breakMinus").click(function() {
  if (breakLength > 0) {
    breakLength -= 1;
    $(".breakLength").text(breakLength);
  }
})
$(".breakPlus").click(function() {
  breakLength += 1;
  $(".breakLength").text(breakLength);
})
$(".workMinus").click(function() {
  if (workTime > 0) {
    workTime -= 1;
    $(".workTime").text(workTime);
    $("#time").text(workTime);
  }
})
$(".workPlus").click(function() {
  workTime += 1;
  $(".workTime").text(workTime);
  $("#time").text(workTime);
})

//click//
$(".start").click(function() {
  display = $('#time');
  startTimer(time, display);
})

//display//
$(".workTime").text(workTime);
$(".breakLength").text(breakLength);
$("#time").text(workTime);

console.log(workTime);
console.log(secondS);

//start time function//
function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.text(minutes + ":" + seconds);

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

});

HTML

<h1>Adjust Work Time</h1>
<div class="workTime"></div>
<button class="btn btn-success workMinus">-</button>
<button class="btn btn-success workPlus">+</button>
<h1>Break Time</h1>
<div class="breakLength"></div>
<button class="btn btn-success breakMinus">-</button>
<button class="btn btn-success breakPlus">+</button>
<h1>Clock</h1>
<div><span id="time"></span>

</div>
<button class="btn btn-success start">start</button>

<div class=""></div>

推荐答案

代码中的一些缺陷；

更改工作时间/休息时间时，不会更新

1. 'timer'变量.因此，在调用启动计时器时，它将使用原始值.因此是错误.

1. 'timer' variable is not updated when you change the worktime/break duration. Hence when calling Start timer, it uses the original value. Hence the bug.

使用JSlint检查您的代码以获取良好的javascript做法.

Use a JSlint to check your code for good javascript practices.

这篇关于Javascript变量不会更新番茄钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！