Question

我正在尝试创建一个计时器，该计时器在单击按钮后运行，然后在单击另一个按钮后重置。但是，一旦应用程序启动，计时器就会自动运行，并且不会重置为0.任何帮助都将非常感激。

Timer.js

xxxs = int(xxx)
color = hex(xxxs).replace("0x", "")
print "color to hexa "+str(color)+""
this.c.colornick = "#"+str(color)

用户脚本

var sec = 0;

function pad(val)
{ 
    return val > 9 ? val : "0" + val; 
}

interval = setInterval( function()
{
    document.getElementById("seconds").innerHTML=pad(++sec%60);
    document.getElementById("minutes").innerHTML=pad(parseInt(sec/60,10));
}, 1000);

function clearTimer()
{
    clearInterval(interval);
}

的index.html

$(document).on("click", "#RunningTrackerBackBtn", function(evt)
{

    clearTimer();

});

    $(document).on("click", "#TrackerTest", function(evt)
{
     /*global activate_subpage */
     activate_subpage("#TrackerPage"); 
    setInterval();        
});

Answer 1

将setInterval代码放入新函数中：

function startCounter() {
    interval = setInterval( function()
    {
        document.getElementById("seconds").innerHTML=pad(++sec%60);
        document.getElementById("minutes").innerHTML=pad(parseInt(sec/60,10));
    }, 1000);
}

这就是点击按钮时应该调用的内容。

Answer 2

这是一个完整的例子：

HTML：

<span id="minutes">00 minutes</span>:<span id="seconds">00 seconds</span>

<button id= "start">Start</button>
<button id= "stop" >Stop</button>
<button id= "clear" >Clear</button>

JS：

var sec = 0;
var interval;

function pad(val) { 
    return val > 9 ? val : "0" + val; 
}

function showTime() {
      document.getElementById("seconds").innerHTML= pad(sec++%60) + ' seconds';
      document.getElementById("minutes").innerHTML= pad(parseInt(sec/60,10)) + ' minutes';
}

function start() {
  interval = setInterval( function() {
        showTime();
  }, 1000);
};

function clearTimer() {
    clearInterval(interval);
    sec = 0;
    showTime();
}

function stopTimer() {
    clearInterval(interval);
}
$("#start").on('click', function() {
        start();
});

$("#stop").on('click', function() {
        stopTimer();
});

$("#clear").on('click', function() {
        clearTimer();
});

在JSFiddle中运行：https://jsfiddle.net/5sauhj8d/8/

计时器自动运行，而不是按钮点击JavaScript

2 个答案: