javascript实现的可在线设置工作时间和休息时间

使用方法

var increaseButtons = document.querySelectorAll('.settings-btn-plus');
var decreaseButtons = document.querySelectorAll('.settings-btn-minus');
var startBtn = document.querySelector("#start");
var stopBtn = document.querySelector("#stop");
var sessionTimeBlock = document.querySelector("#session-time");
var breakTimeBlock = document.querySelector("#break-time");
var timeStatusBlock = document.querySelector("#time-status");
var hoursSpan = document.querySelector("#hours-left");
var minSpan = document.querySelector("#min-left");
var secSpan = document.querySelector("#sec-left");
var timerTypeName = document.querySelector("#timer-type");
var totalProgress = document.querySelector(".total-progress");
var secondsProgress = document.querySelector(".progress");

var timer = '';//below used for setInterval/clearInterval
var timerActive = false;
var timerType = 'session';//is then changed to break
var startTime = 1500; //start of the session: session time by default
var sessionTime = 1500;//default session time stored in seconds
var breakTime = 300; //default break time stored in seconds;
var currentTime = 1500; //time displayed on timer in seconds

function displayDefaultTime() {
  sessionTimeBlock.innerHTML = displayMinutes(sessionTime) + ' min';
  breakTimeBlock.innerHTML = displayMinutes(breakTime) + ' min';
  displayCurrentTime();
}

function handleTotalProgress(startTime, currentTime) {
  var progressColor = '';
  if (timerType === 'session') {
      progressColor = '#64D7DB';
      totalProgress.style.backgroundColor = '#64D7DB';
    }
    else {
      progressColor = '#A75ACE';
      totalProgress.style.backgroundColor = '#A75ACE';
    }
  var timePassed = startTime - currentTime;
  var deg;
  if (timePassed < (startTime / 2)) {
    deg = 90 + (360 * timePassed / startTime)
    totalProgress.style.backgroundImage = 'linear-gradient('+deg+'deg, transparent 50%, #0E1826 50%),linear-gradient(90deg, #0E1826 50%, transparent 50%)';
  }
  else if (timePassed >= (startTime / 2)) {
    deg = -90 + (360 * timePassed / startTime);
    totalProgress.style.backgroundImage = 'linear-gradient('+deg+'deg, transparent 50%, '+progressColor+' 50%),linear-gradient(90deg, #0E1826 50%, transparent 50%)';
  }
}

function handleSecondsProgress(currentTime) {
  var progressBarColor = '';
  if (timerType === 'session') {
    progressBarColor = '#BFD7EA';
    secondsProgress.style.backgroundColor = '#BFD7EA';
  }
  else {
    progressBarColor = '#F9EDF9';
    secondsProgress.style.backgroundColor = '#F9EDF9';
  }
  var secondsPassed = 60 - convertFromSec(currentTime).seconds;
  var deg;
  if (secondsPassed < (60 / 2)) {
    deg = 90 + (360 * secondsPassed / 60)
    secondsProgress.style.backgroundImage = 'linear-gradient('+deg+'deg, transparent 50%, #0E1826 50%),linear-gradient(90deg, #0E1826 50%, transparent 50%)';
  }
  else if (secondsPassed >= (60 / 2)) {
    deg = -90 + (360 * secondsPassed / 60);
    secondsProgress.style.backgroundImage = 'linear-gradient('+deg+'deg, transparent 50%, '+progressBarColor+' 50%),linear-gradient(90deg, #0E1826 50%, transparent 50%)';
  }
}

function displayCurrentTime() {
  if (convertFromSec(currentTime).hours) {
    hoursSpan.classList.remove('hidden');
    hoursSpan.innerHTML = convertFromSec(currentTime).hours + ': ';
  } 
  else {
    hoursSpan.innerHTML = '';
  }
  minSpan.innerHTML = convertFromSec(currentTime).minutes + ': ';
  secSpan.innerHTML = convertFromSec(currentTime).seconds;
}

function addLeadingZero(time) {
  return time < 10? '0' + time : time;
}

function displayMinutes(timeInSec) {
  return parseInt(timeInSec / 60);
}

function convertFromSec(timeInSec) {
  var result = { hours: 0, minutes: 0, seconds: 0 };
  var seconds = timeInSec % 60;
  var minutes = parseInt(timeInSec / 60) % 60;
  var hours = parseInt(timeInSec / 3600);
  if (hours > 0) {
    result.hours = hours;
  }
  result.minutes = addLeadingZero(minutes);
  result.seconds = addLeadingZero(seconds);
  return result;
}

function countDown() {
  timerTypeName.innerHTML = timerType;
  if (currentTime > 0) {
    currentTime --;
    displayCurrentTime();
    handleTotalProgress(startTime, currentTime);
    handleSecondsProgress(currentTime);
    if (currentTime === 0) {
      if (timerType === 'session') {
        currentTime = breakTime;
        startTime = breakTime;
        timerType = 'break';
        timerTypeName.innerHTML = timerType;
      }
      else {
        currentTime = sessionTime;
        startTime = sessionTime;
        timerType = 'session';
        timerTypeName.innerHTML = timerType;
      }
    }
  }
}

function toggleTimer() {
  if (timerActive) {
    clearInterval(timer);
    startBtn.innerHTML = 'start';
    timerActive = false;
  }
  else {
    startBtn.innerHTML = 'pause';
    timer = setInterval(countDown, 1000);
    timerActive = true;
  }
}

function stopTimer() {
  timerActive = false;
  startBtn.innerHTML = 'start';
  clearInterval(timer);
  timerType = 'session';
  currentTime = sessionTime;
  handleTotalProgress(startTime, currentTime);
  handleSecondsProgress(currentTime);
  displayDefaultTime();
}

function displayChangedTime(e, time) {
  if (e.target.id === 'session-plus' || e.target.id === 'session-minus') {
    sessionTimeBlock.innerHTML = displayMinutes(sessionTime) + ' min';
  }
  else if (e.target.id === 'break-plus' || e.target.id === 'break-minus') {
    breakTimeBlock.innerHTML = displayMinutes(breakTime) + ' min';
  }
}

startBtn.addEventListener('click', toggleTimer);
stopBtn.addEventListener('click', stopTimer);

for (var i = 0; i < increaseButtons.length; i++) {
  increaseButtons[i].addEventListener('click', function(e) {
    if (!timerActive) {
      if (e.target.id === 'session-plus') {
        sessionTime += 60;
        currentTime = sessionTime;
        startTime = sessionTime;
        displayChangedTime(e, sessionTime);
        displayCurrentTime();
      }
      else if (e.target.id === 'break-plus') {
        breakTime += 60;
        displayChangedTime(e, breakTime);
        displayCurrentTime();
      }
    }
  });
} 

for (var i = 0; i < decreaseButtons.length; i++) {
  decreaseButtons[i].addEventListener('click', function(e) {
    if (!timerActive) {
      if (e.target.id === 'session-minus') {
        if (sessionTime > 60) {
          sessionTime -= 60;
          currentTime = sessionTime;
          startTime = sessionTime;
          displayChangedTime(e, sessionTime);
          displayCurrentTime();
        }
      }
      else if (e.target.id === 'break-minus') {
        if (breakTime > 60) {
          breakTime -= 60;
          displayChangedTime(e, breakTime);
          displayCurrentTime();
        }
      }
    }
  });
} 

document.addEventListener('DOMContentLoaded', displayDefaultTime);