时间戳

首页 > 解决方案 > Vanilla JS 倒数计时器自动运行

javascript - Vanilla JS 倒数计时器自动运行

问题描述

我正在尝试构建一个番茄计时器，并且正在添加一个按钮来启动/停止，但我试图让我的计时器不会在页面刷新时自动启动。

var timer = 1500;
var secondsRemaining;
var interval = setInterval(myTimer,1000);

function convertSeconds(timer)
{
var min = Math.floor (timer / 60);
var sec = timer - (min * 60);

//add a leading zero (as a string value) if seconds less than 10
if (sec < 10) {
        sec = "0" + sec;
    }
return min + ':' + sec;
}

//
function myTimer()                         
{
document.getElementById("timer").innerHTML = convertSeconds(timer);
timer--; 
if (timer < 0)                        
  clearInterval(interval);
}

https://codepen.io/powershell19/pen/vYNbeZy

标签： javascript

解决方案

在用户单击“开始”按钮之前不要设置间隔。

就像是...

var timer = 1500;
var secondsRemaining;
var interval;  // <= declared, not initialized

function convertSeconds(timer)
{
var min = Math.floor (timer / 60);
var sec = timer - (min * 60);

//add a leading zero (as a string value) if seconds less than 10
if (sec < 10) {
        sec = "0" + sec;
    }
return min + ':' + sec;
}

//
function myTimer()                         
{
document.getElementById("timer").innerHTML = convertSeconds(timer);
timer--; 
if (timer < 0)                        
  clearInterval(interval);
}

// call this function from "onclick" event handler of button
function startTimer()
{
    interval = setInterval(myTimer, 1000)
}

推荐阅读