您好，有一个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>你让这件事变得比它需要的要复杂得多。
首先，您必须获取对计时器的引用，以便以后可以使用.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>只是变量的顺序。如果您拆分并创建函数，则处理起来会更容易。首先，您应该将元素时钟置于间隔函数之外，其次您应该将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>