Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как добавить в таймер функцию сброса? (https://javascript.ru/forum/events/72832-kak-dobavit-v-tajjmer-funkciyu-sbrosa.html)

Morty 01.03.2018 16:22

Как добавить в таймер функцию сброса?
 
Есть вот такой плагин
// CountDown Clock
// Version   : 1.0.1
// Developer : Ekrem KAYA
// Website   : [url]http://e-piksel.com[/url]
// GitHub    : [url]https://github.com/epiksel/countdown[/url]

(function ($) {
    $.fn.countdown = function (options, callback) {
        var settings = $.extend({
            date: null,
            offset: null,
            day: 'Day',
            days: 'Days',
            hour: 'Hour',
            hours: 'Hours',
            minute: 'Minute',
            minutes: 'Minutes',
            second: 'Second',
            seconds: 'Seconds'
        }, options);

        // Throw error if date is not set
        if (!settings.date) {
            $.error('Date is not defined.rrrr');
        }

        // Throw error if date is set incorectly
        if (!Date.parse(settings.date)) {
            $.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');
        }

        // Save container
        var container = this;

        /**
         * Change client's local date to match offset timezone
         * @return {Object} Fixed Date object.
         */
        var currentDate = function () {
            // get client's current date
            var date = new Date();

            // turn date to utc
            var utc = date.getTime() + (date.getTimezoneOffset() * 60000);

            // set new Date object
            var new_date = new Date(utc + (3600000*settings.offset));

            return new_date;
        };

        /**
         * Main countdown function that calculates everything
         */
        function countdown () {
            var target_date = new Date(settings.date), // set target date
                current_date = currentDate(); // get fixed current date

            // difference of dates
            var difference = target_date - current_date;

            // if difference is negative than it's pass the target date
            if (difference < 0) {
                // stop timer
                clearInterval(interval);

                if (callback && typeof callback === 'function') callback();

                return;
            }

            // basic math variables
            var _second = 1000,
                _minute = _second * 60,
                _hour = _minute * 60,
                _day = _hour * 24;

            // calculate dates
            var days = Math.floor(difference / _day),
                hours = Math.floor((difference % _day) / _hour),
                minutes = Math.floor((difference % _hour) / _minute),
                seconds = Math.floor((difference % _minute) / _second);

            // based on the date change the refrence wording
            var text_days = (days === 1) ? settings.day : settings.days,
                text_hours = (hours === 1) ? settings.hour : settings.hours,
                text_minutes = (minutes === 1) ? settings.minute : settings.minutes,
                text_seconds = (seconds === 1) ? settings.second : settings.seconds;

                // fix dates so that it will show two digets
                days = (String(days).length >= 2) ? days : '0' + days;
                hours = (String(hours).length >= 2) ? hours : '0' + hours;
                minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
                seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

            // set to DOM
            container.find('.days').text(days);
            container.find('.hours').text(hours);
            container.find('.minutes').text(minutes);
            container.find('.seconds').text(seconds);

            container.find('.days_text').text(text_days);
            container.find('.hours_text').text(text_hours);
            container.find('.minutes_text').text(text_minutes);
            container.find('.seconds_text').text(text_seconds);
        }

        // start
        var interval = setInterval(countdown, 1000);
    };

})(jQuery);

На странице несколько таймеров
<style>
        ul.timer {
          list-style: none;
          margin:0;
          padding: 0;
          display: block;
        }

        ul.timer li { display: inline-block; }

        ul.timer li span {
          font-size: 20px;
          font-weight: 300;
          line-height: 20px;
        }

        ul.timer li.seperator {
          font-size: 20px;
          line-height: 17px;
          vertical-align: top;
        }

        ul.timer li p {
          color: #a7abb1;
          font-size: 25px;
        }
</style>
<button class="start" id="1">Start 1</button>
<ul id="timer1" class="timer">
<li><span class="minutes" id="min1">00</span></li>
<li class="seperator">:</li>
<li><span class="seconds" id="sec1">00</span></li>
</ul>
<button class="start" id="2">Start 2</button>
<ul id="timer2" class="timer">
<li><span class="minutes" id="min2">00</span></li>
<li class="seperator">:</li>
<li><span class="seconds" id="sec2">00</span></li>
</ul>

Запуск таймера
$('.start').click(function(){
var id = $(this).attr('id');
$("#timer"+id).countdown({
  date: '03/02/2018 12:00:00',
  offset: +2
}, function () {
  alert('Done!');
});

Нужно добавить функцию, которая будет при клике на кнопку, например, "стоп" сбрасывать нужный таймер.
Пробовал таким образом
(function ($) {
  $.fn.countdown = function (options, callback, reset) {
  //далее по тексту без изменений
  if (reset == 1) {clearInterval(interval);}
  };
})(jQuery);

//Отправка запроса
$('.stop').click(function(){
  var id = $(this).attr('id');

  $("#timer"+id).countdown({
    date: '01/01/2000 00:00:00'
  }, function () {
    $('#min'+id).html('00');
    $('#sec'+id).html('00');
  }, 1);
});

Но не работает. Помогите, пожалуйста :)


Часовой пояс GMT +3, время: 09:43.