JavaScript点击停止开始时钟时间

Question

您好，javascript时钟计时器的启动和停止功能有问题。

我包括了css，html和javascript源代码，我希望功能是启动和停止。我尝试了很多次，但仍然无法解决问题。

非常简单，但是单击开始和单击停止非常困难。

谢谢

有什么帮助吗？

setInterval(function () {
 var currentTime = new Date(); 
 var hours = currentTime.getHours();
 var minutes = currentTime.getMinutes();
 var seconds = currentTime.getSeconds(); 
 var period = "AM";
 var setTimeout = currentTime.getDate();
 
 if (setTimeout = clock) {
           currentTime = "pause";  
   
     
document.querySelector('clock').onclick = pause();    
     
 }
    
    
 if (hours >=12) {
     
     period = "PM";
     
 }
    
if (hours > 12) {
    
    hours = hours - 12;
    
}
    
if (seconds < 10) {
    
    seconds = "0" + seconds;
    
}
    
if (minutes < 10) {
    
    minutes = "0" + minutes;
    
}    
    
    
var clockTime = hours + ":" + minutes + ":" + seconds + " " + period + "pause" + setTimeout;
var clock = document.getElementById('clock');
    clock.innerText = clockTime;

            
}, 1000);

body {
background: coral;

}



#clock {
   
 position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  background: teal;
  padding: 2rem;
  border-radius: 5px 5px 5px 5px
    
      
    
    
}

<div id="clock"></div>  

Answer 1

您正在为此付出更多的努力。

首先，您必须获得对计时器的引用，以便以后（如果需要暂停时钟）使用.clearInterval()可以将其取消。

第二，要以您选择的格式显示时间，您只需要使用.toLocaleTimeString()。您所有涉及格式化结果的代码都可以删除。

有关详细信息，请参见下面的内联评论。

// Get this reference, just once outside of the function that it will be needed in
// instead of on each invocation of the function.
let clock = document.getElementById('clock');
let timer = null;  // The timer variable is null until the clock initializes

// This is the modern way to set up events
clock.addEventListener("click", function(){
  // If the clock is ticking, pause it. If not, start it
  if(timer !== null){
    clearInterval(timer);  // Cancel the timer
    timer = null;  // Reset the timer because the clock is now not ticking.
  } else {
    timer = setInterval(runClock, 1000);
  }
});

// Get a reference to the timer and start the clock
timer = setInterval(runClock, 1000);

function runClock() {
    // .innerText is non-standard. Use .textContent instead.
    // .toLocaleTimeString() gets you the locale format of the time.
    clock.textContent = new Date().toLocaleTimeString();            
}

body { background: coral; }

#clock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  background: teal;
  padding: 2rem;
  border-radius: 5px 5px 5px 5px
}

<div id="clock"></div>

Answer 2

只是变量的顺序。如果拆分并创建函数，则处理起来会更容易。首先，应将元素时钟置于间隔函数之外，其次，应将setInterval用作函数，然后可以重用并放入变量。第三是将时间间隔放在某个变量中，因为您可以停止调用clearInterval的事件。

var clock = document.getElementById('clock');
var currentTime;
var pause = true;
var clockTime = 'paused';
clock.innerText = clockTime;

function initClock() {
  return setInterval(function () {
   currentTime = new Date(); 
   var hours = currentTime.getHours();
   var minutes = currentTime.getMinutes();
   var seconds = currentTime.getSeconds(); 
   var period = "AM";
   var setTimeout = currentTime.getDate();
    
   if (hours >=12) {
     period = "PM";
   }

   if (hours > 12) {
     hours = hours - 12;
  }

  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  if (minutes < 10) {
    minutes = "0" + minutes;
  }    


  clockTime = hours + ":" + minutes + ":" + seconds + " " + period;
  clock.innerText = clockTime;
  }, 1000);
}

clock.onclick = function() {
  if(pause){
    theClock = initClock();
  } else {
    clockTime = 'paused';
    clock.innerText = clockTime;
    clearInterval(theClock);
 }
  pause = !pause;
};

body {
background: coral;

}



#clock {
   
 position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  background: teal;
  padding: 2rem;
  border-radius: 5px 5px 5px 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clock"></div>