如何使用相同的功能番茄钟来实现休息时间倒计时

时间:2017-08-01 18:46:35

标签: javascript jquery html

我正在研究番茄钟时钟,功能几乎已经完成,除非我在实现breakTime倒计时时遇到困难而没有为breakTime重写countDown()函数。我得到的印象是我可以在休息时间重复使用countDown函数。我只是不知道如何。如果有人能给我一些线索/代码?谢谢项目https://codepen.io/zentech/pen/vJGdjN 的Javascript

$(document).ready(function() {
  //variables
var workTime = $(".work").text(); //working time
var breakTime = $(".break").text(); //break time
var seconds = 00;
var minutes = workTime; //setting clock = to workTime
var clockDisplay = document.getElementById("display"); 
var counterId = 0;
var state = "on";


//start / stop listener functionality
$("#start").click(function() {
  var value = $(".button").text();
  console.log(value);
  if(value == "Start") {
    state = "on";
    console.log("started!");
    //starting counter
    counterId = setInterval(countDown, 1000);
    $("#session").text("Working");
    $(".button").text("Stop");
  }
  else {
    console.log("stopped");
    state = "off";
    minutes = workTime;
    seconds = 0;
    //clear counter
    clearInterval(counterId);
    clockDisplay.innerHTML = workTime +":00";  
    $(".button").text("Start");
  }  
});

//add work time
$('.plusWork').click(function() {
  workTime++;
  minutes = workTime;
  $('.work').text(workTime);
  clockDisplay.innerHTML = workTime +":00";
  console.log(workTime);
});

//substract work time
$('.minWork').click(function() {
  workTime--;
  minutes = workTime;
  $('.work').text(workTime);
  clockDisplay.innerHTML = workTime +":00";
  console.log(workTime);
});

//add break time
$('.plusBreak').click(function() {
  breakTime++;
  minutes = breakTime;
  $('.break').text(breakTime);
  console.log(breakTime);
});

//substract break time
$('.minBreak').click(function() {
  breakTime--;
  minutes = breakTime;
  $('.break').text(breakTime);
  console.log(breakTime);
});

//work countdown timer function
function countDown() {
  //if workTime = 0 reset counter and stop
  if(minutes == 0 && seconds == 0 && state == "on") {
    clearTimeout(counterId);
    //if work countdown reach 0, start break
    minutes = breakTime;
    seconds = 00;
    setInterval(countDown, 1000); 
    return;
  }
  else if(minutes == 0 && seconds > 0) {
    seconds--;
    if(seconds < 10) seconds = "0"+seconds;
    clockDisplay.innerHTML = minutes + ":" + seconds;
    console.log(minutes +":"+seconds +" 2");
  }
  //when seconds < 0 substract a minute
  else if(minutes > 0 && seconds < 0) {
    minutes--;
    seconds = 59;
    clockDisplay.innerHTML = minutes + ":" + seconds;
    console.log(minutes +":"+seconds +" 3");
  }
  else {
    //if second single digit add 0
    if (seconds < 10) seconds = "0"+seconds; 
    clockDisplay.innerHTML = minutes +":"+ seconds;
    seconds--;
    console.log(minutes +":"+seconds +" 4");
  }  
}

});

0 个答案:

没有答案