在javascript中启动和停止/重置计时器

时间:2014-04-10 16:44:36

标签: javascript timer

所以我试图制作一个功能,你点击一个按钮,一个盒子变成红色并从300开始倒计时然后变回绿色,我已经全部工作但是如果再次点击该按钮它会计数越来越快,所以我想让它改变按钮停止所以你可以再次点击它,让它基本上重置,所以你不必等待计时器,现在我有这个,但它不会工作

function alttimer(timernum){
if($(alt1but).val() == "Start") //button is start
    {
        $(alt1color).attr("src", "red.png");
        alttimer1();
        $(alt1but).val("Stop");
    }
    else //button is stop
    {
        $(alt1but).val("Start");
        clearTimeout(alttimer2);
        $(alt1color).attr("src", "green.png");
        t1 = '300';
        $('#alt1tim').attr("value", "");
    }
};

var alttimer1;
alttimer1 = setTimeout("function(){
            if(t1 == '0')
            {
                $(alt1color).attr('src', 'green.png');
                name = $('#alt1t').val();
                $('#alt21im').attr('value', '');
                t1 = '300';
            }
            else
            {
                $('#alt1tim').attr('value', t1);
                t1--;
            }

};",1000);

1 个答案:

答案 0 :(得分:0)

你正在做的事情有点奇怪。我完全建议你做另外一件事:

var counter = 300;
var active = false;
var intervalId = -1;
function alttimer(){
    if(!active) //button is start
    {
        $(alt1color).attr("src", "red.png");
        intervalId = startTimer();
        $(alt1but).val("Stop");
    }
    else //button is stop
    {
        $(alt1but).val("Start");
        clearTimeout(intervalId);
        counter = 300;
        $(alt1color).attr("src", "green.png");
        $('#alt1tim').attr("value", "");
}};

function startTimer() {
    return setTimeout(function(){
        if(t1 == '0')
        {
            $(alt1color).attr('src', 'green.png');
            $('#alt21im').attr('value', '');
            counter = 300;
        }
        else
        {
            counter--;
            $('#alt1tim').attr('value', counter);
        }
    },1000);
}

尝试类似的东西。我没有测试代码,但应该可以工作。

顺便说一下,您不必将函数创建为字符串。

祝你好运