Блог

Главная - Вопросы по программированию - добавить кнопку start stop и reset jquery

добавить кнопку start stop и reset jquery

#jquery #timer

#jquery #таймер

Вопрос:

как мне добавить кнопку запуска, остановки и сброса к таймеру обратного отсчета

 var cycle = 0;


    function countdown()
    {
        var min = 60*5;
        var max = 60*7;

        return Math.floor(Math.random()*max)   min;
    }


    function search()
    {
        $.getJSON('json', function(data)
            {
                $('#fullurl').attr("src", 'mywebsite'   data);
            }
        );
    }


    function update()
    {
        if (cycle == 0)
        {
            cycle = countdown();
            search();

            $('#countdown').html('...');
        }
        else 
        {
            var minutes = Math.floor(cycle / 60);
            var seconds = (cycle % 60);

            if (seconds < 10) seconds = "0"   seconds;

            $('#countdown').html(minutes   ':'   seconds);

            cycle--;
        }

        setTimeout('update()', 1000);
    }

Комментарии:

1. Что вы хотите, чтобы кнопки Start, Stop и Reset выполняли?

2. @Thomas Shields за обратный отсчет

3. Итак, какие функции вы хотите, чтобы кнопки start, stop и reset вызывались? или вам интересно, как создать эти функции?

Ответ №1:

Я действительно не вижу никакой HTML-разметки в приведенном выше коде, и это выглядит немного загадочно и неполно для меня. Я предполагаю, что нужно вызвать update() при запуске, отменить тайм-аут при остановке и сбросить ваши переменные при сбросе.

 var cycle = 0;
var timer_id = null;

function countdown()
{
    var min = 60*5;
    var max = 60*7;

    return Math.floor(Math.random()*max)   min;
}


function search()
{
    $.getJSON('json', function(data)
        {
            $('#fullurl').attr("src", 'mywebsite'   data);
        }
    );
}


function update()
{
    if (cycle == 0)
    {
        cycle = countdown();
        search();

        $('#countdown').html('...');
    }
    else 
    {
        var minutes = Math.floor(cycle / 60);
        var seconds = (cycle % 60);

        if (seconds < 10) seconds = "0"   seconds;

        $('#countdown').html(minutes   ':'   seconds);

        cycle--;
    }

    timer_id = setTimeout('update()', 1000);
}

function stop()
{
    if(timer_id)
    {
        clearTimeout(timer_id);
        timer_id = null;
    }
}

function reset()
{
    stop();
    cycle = 0;

    //reset your HTML elements, just guessing
    $('#countdown').html('');
    $('#fullurl').attr("src", '');
}

//jQuery ready function
$(function(){
    //assuming you add some buttons with IDs to your markup
    $('#btnStart').click(update);
    $('#btnStop').click(stop);
    $('#btnReset').click(reset);
});