<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Простой таймер обратного отсчета на JavaScript

Простой таймер обратного отсчета на JavaScript

Переходя на различные сайты в Интернете, Вам, скорее всего, неоднократно встречались различные УТП (уникальные торговые предложения), которые помимо захватывающего внимание описания, дабы подстегнуть Вас сделать покупку, содержали еще и таймер обратного отсчета. Расчет на то, что человек увидев таймер обратного отсчета рядом с надписью "акция на товар закончится через 24 часа", будет, в среднем, более склонен купить товар прямо сейчас, нежели через некоторое время.

И сейчас я покажу Вам простой скрипт на JavaScript - таймер обратного отсчета с помощью которого это можно реализовать:

/**
* класс CountDownTimer
*/
function CountDownTimer(duration,granularity) {
    this.duration = duration; // duration in seconds
    this.init_duration = duration; // for restart
    this.granularity = granularity || 1000;
    this.running = false;
    this.onStopCallback = undefined;
    this.tickFunctions = [];
}

// метод, в который добавляются сосбственные функции
// они будут выполняться при каждом отсчете таймера
CountDownTimer.prototype.onTick = function (callback) {
    if (typeof callback == 'function') {
        this.tickFunctions.push(callback);
    }

    return this;
};

/**
* Конвертирует строку времени в формате hh:mm:ss в формат секунд (просто число)
*
*/
CountDownTimer.toSeconds = function (str) {

    // разбиваем строку на составляющие ее части времени
    let [hours, minutes, seconds] = str.split(':');

    // конвертируем каждую компненту в число (знак плюс перед именем переменной) и суммируем итог
    return (+hours) * 3600 + (+minutes) * 60 + (+seconds);
};


/**
* Конвертируем время в виде секунд в объект времени
*
* @param seconds
* @returns {{hours: number, seconds: number, minutes: number}}
*/
CountDownTimer.toTimeObject = function (seconds) {
    return {
        hours:   ( seconds / 3600) | 0,        // получаем количество часов и преобразуем их в число операторм | 
        minutes: ((seconds / 60)   | 0) % 60,  // вытаскиваем минуты
        seconds: ( seconds % 60)   | 0         // и секунды
    };
};


/**
* Форматируем объект времени добавляя к каждой компоненте лидирующий ноль
*
* @param time object
* @returns {string} formatted string
*/
CountDownTimer.addLeadingZero = function (time) {
    let hours = time.hours < 10 ? '0' + time.hours : time.hours;
    let minutes = time.minutes < 10 ? '0' + time.minutes : time.minutes;
    let seconds = time.seconds < 10 ? '0' + time.seconds : time.seconds;

    return hours + ':' + minutes + ':' + seconds;
};

/**
* Конвертируем секунды в строку времени формата hh:mm:ss
*/
CountDownTimer.format = function (seconds) {
    return CountDownTimer.addLeadingZero(CountDownTimer.toTimeObject(seconds));
};


/**
* Метод, запускающий таймер
*
*/
CountDownTimer.prototype.start = function () {
    // если таймер уже запущен, просто выходим
    if (this.running) {
        return;
    }
    
    // флаг, сигнализирующий о том, что таймер запущен
    this.running = true;
    // that - сохраняем ссылку на текующий контекст, diff - внутрений счет оставшихся секунд
    let that = this, diff;

    // сама функция timer
    (function timer() {
        diff = that.duration--; // минус одна секунда при итерации
    
        // если таймер не дошел до нуля
        if (diff > 0) {
            // вызывать функцию timer через секунду
            setTimeout(timer, that.granularity);
        } else {
            // если время вышло
            diff = 0;
            that.running = false;
            // если нам есть что сделать при окончании времени, вызываем callback
            if( that.onStopCallback ) that.onStopCallback.call(that);
            return; // обязательно выходим из таймера
        }
        
        // поочередно вызываем все функции-обработчики при каждом
        // отсчете таймера
        that.tickFunctions.forEach(function(callback) {
            callback.call(this, diff);
        }, that);

    }());
};

// данный метод срабатывает когда отсчет таймер достиг нуля
CountDownTimer.prototype.onStop = function(callback) {
    this.onStopCallback = callback;
    return this;
};

Пример работы на странице:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS.Countdown</title>
    <script src="src/CountDownTimer.js"></script>
    <style>
        .time {
            padding: 5px;
            display: inline-block;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div>Регистрация на мероприятие будет закрыта через <span class="time">00:00:20</span> сек.</div>
<div>Регистрация на мероприятие будет закрыта через <span class="time">00:00:12</span> сек.</div>
<div>Регистрация на мероприятие будет закрыта через <span class="time">00:00:15</span> сек.</div>
<div>Регистрация на мероприятие будет закрыта через <span class="time">00:00:10</span> сек.</div>
<script>


    let tags = document.querySelectorAll('.time');
    for(let tag of tags)
    {
        // продолжительность таймера задана в теге span с классом .time
        // оттуда и берем
        let duration = CountDownTimer.toSeconds(tag.innerText);

        // создаем объект таймера
        let timer = new CountDownTimer(duration,1000);

        // при счете 
        // добавляем время обратно в тег
        timer.onTick((time) => {
             tag.innerText = CountDownTimer.format(time)
        }).onStop(() => { //  
             tag.parentElement.style.backgroundColor="#f00";
             tag.parentElement.style.color = "#fff";
             tag.innerText = "Offer ends!";
        }).start();
    }


</script>
</body>
</html>

Вот так можно реализовать простой таймер обратного счета (countdown timer) на JavaScript.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.