Question

我无法理解为什么我的计时器没有从点击开始，浏览器控制台在功能上给我错误

function eventsTimer() {
timer.addEventListener('click', function() {
startTimer();
});
}

但我真的不明白如何解决这个问题

this is my codepen link

这是我的javascript

    $(function(){

    document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    addClickEvents();
  }
}

//--- DOM Variables ---
var timer = document.querySelectorAll('.timer');

var minus = document.querySelectorAll('.minus');
var plus = document.querySelectorAll('.plus');

var timeSession = document.querySelector('.session .time');
var timeBreak = document.querySelector('.break .time');
var timeFocus = timeSession;

var timeInterval = '';
var timeRemaining = ''; 

    function addClickEvents() {
  eventsTimeChange();
  eventsTimer();
    }

//click events to plus and minus buttons
function eventsTimeChange() {
  for(var i = 0; i < minus.length; i++){
   minus[i].addEventListener('click', function() {
      if(timeInterval){
        return;
      }
      subtractTime(this);
      initializeCountdown();
      updateFill();
    });

   plus[i].addEventListener('click', function() {
      if(timeInterval){
        return;
      }
      addTime(this);
      initializeCountdown();
      updateFill();
    });
  }
}

//subtractTime
function subtractTime(element) {
    text = element.nextElementSibling.innerHTML;
    text = eval(text + '-1');
    element.nextElementSibling.innerHTML = text > 0 ? text : '1';
    timer.innerHTML = timeFocus.innerHTML + ':00';
}   

//addTime
function addTime(element) {
  text = element.previousElementSibling.innerHTML;
  text = eval(text + '+1');
  element.previousElementSibling.innerHTML = text;
  timer.innerHTML = timeFocus.innerHTML + ':00';
}

//add click events to the timer
function eventsTimer() {
  timer.addEventListener('click', function() {
    startTimer();
  });
}

//switches the timer state between play/pause states.
function startTimer() {
  if (!timeRemaining) {
    initializeCountdown();
  }
  if (timeInterval) {
    clearInterval(timeInterval);
    timeInterval = '';
  } else {
    timeInterval = setInterval(updateDisplay, 1000);
  }
}

//countdown timer functionality

function initializeCountdown() {
  timeRemaining = {
    total: eval(timeFocus.innerHTML) * 60 * 1000,
    minutes: eval(timeFocus.innerHTML),
    seconds: 0,
  };
}

//updates the value of the timer to refelct timeRemeaining.

function updateDisplay() {
  var t = timeRemaining.total - 1000;

  if (t < 1000) {
    startTimer();
    setTimeout(timerSwitch, 100);
    return;
  }

  timeRemaining.total = t;
  timeRemaining.minutes = Math.floor((t / 1000 / 60) % 60);
  timeRemaining.seconds = Math.floor((t / 1000) % 60);
  var seconds = ('0' + timeRemaining.seconds).slice(-2);
  timer.innerHTML = timeRemaining.minutes + ":" + seconds;
  updateFill();
}

//updateFill
function updateFill() {
  var top = timeRemaining.total;
  var bottom = eval(timeFocus.innerHTML) * 60 * 1000;
  var percent = top/bottom * 100;
  var color = window.getComputedStyle(timer, null).getPropertyValue('border-color');

  timer.style.background = 'linear-gradient(transparent ' + percent + '%, ' + color + ' ' + percent + '%)'
}

//timerSwitch
function timerSwitch() {
  timer.classList.toggle('on_break');
  timeFocus = timeFocus == timeSession ? timeBreak : timeSession;
  timer.innerHTML = timeFocus.innerHTML + ':00';
  initializeCountdown();
  updateFill();
  startTimer();
}




});

Answer 1

更改

var timer = document.querySelectorAll('.timer');

var timer = document.querySelectorAll('.timer')[0];

Demo

计时器不会在点击时启动，也不会被时间选择器改变

1 个答案: