☰
Обратный отсчет времени (jQuery плагин)
JavaScript

Таймер обратного отсчета времени.

Сегодня поговорим о таймерах для сайтов. К примеру, вам нужно сделать обратный отсчет времени до окончания акции или до события на вашем лэндинге или в интернет магазине. Само собой разумеется, такую штуку возможно реализовать только через JavaScript. Изобретать велосипед не стал, вместо этого нашел подходящий jQuery плагин, с моей точки зрения наиболее добротно реализованный — jQuery Countdown Там же подробная документация на английском языке.

В этой заметке речь пойдет о кастомном циферблате и о примере использования плагина. Мне нужен был большой яркий циферблат, решил сделать по стилю напоминающий часы в метро посмотреть демо К сожалению, положить прямо тут рабочий счетчик не получилось из-за дизайна — он вылезает за рамки блока контента. Увы.


digits

Подготовленная сборка вместе с плагином версии 2.1

Помимо прочего, хотелось текущее время для таймера получать с сервера, где настроен сервис точного времени (ntp). Мало ли, у пользователя часы установлены неверно, всякое бывает. Итак, о плагине рассказал, про циферблат тоже. Интересно, что в плагине предусмотрена локализация на различные языки мира и учитываются числительные (1 минута, 10 минут, 53 минуты). Кстати они, то есть подписи к секциям, изменяются вместе с цифрами «онлайн».

Ниже приведен пример использования, в конце заметки можно скачать демонстрационный архив. Особо заинтересованным могу выслать разбитый по слоям PSD файл, чтобы можно было легко поменять цвет цифр, тени, фон, — словом, подстроить под ваш дизайн страницы.


psd

Цифры даже можно сделать на прозрачном холсте, а внешним видом рулить через CSS, собственно, в приведенном примере почти так и сделано, «корпус» таймера и тень от него, выполнены исключительно стилями. Подложка спрайта, извините, черная, на светлом фоне смотреться все равно не будет, так что спрашивайте psd.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>До Нового Года</title>

        <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="js/jquery.plugin.min.js"></script>
        <script src="js/jquery.countdown.js"></script>
        <script src="js/jquery.countdown-ru.js"></script>

        <script>
            $(function () {
                var time = new Date();
                var year = time.getFullYear() + 1;
                
                $.ajax({
                    url: 'time.php', //замените на свой URL.
                    dataType: 'text', 
                    success: function(text) { 
                        time = function(){ return new Date(text); }; 
                    }
                }); 

                $(document).ajaxComplete(function() {
                    var austDay = new Date(year, 0, 1);
                    $('#defaultCountdown').countdown({
                        until: austDay, 
                        serverSync: time,
                        layout: '<div class="days"><span class="image{d100}"></span><span class="image{d10}"></span><span class="image{d1}"></span>{dl}</div>' + 
                            '<span class="imageSpace"></span>' + 
                            '<div class="seconds"><span class="image{h10}"></span><span class="image{h1}"></span>{hl}</div>' + 
                            '<span class="imageSep"></span>' + 
                            '<div class="seconds"><span class="image{m10}"></span><span class="image{m1}"></span>{ml}</div>' + 
                            '<span class="imageSep"></span>' + 
                            '<div class="seconds"><span class="image{s10}"></span><span class="image{s1}"></span>{sl}</div>'
                    }); 
                });
            });
        </script>
        
        <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
    </head>
    
    
    <body>
        <div class="container">
            <b>до Нового Года осталось:</b>
            <div id="defaultCountdown"></div>
        </div>
    </body>
    
</html>

style.css

html
{
    font-family: 'Arial narrow', tahoma;
    background: #fffee2;
}

#defaultCountdown
{
   margin: 0 auto;
   float: left;
   background: #000;
   width: 685px;
   padding-left: 25px;
   height: 113px;
   padding-top: 17px;
   border-radius: 10px;
   border-width: 5px;
   border: 3px double #e2e2e2;
   -webkit-box-shadow: 0px 0px 45px 4px rgba(0,0,0,0.75);
   -moz-box-shadow: 0px 0px 45px 4px rgba(0,0,0,0.75);
   box-shadow: 0px 0px 45px 4px rgba(0,0,0,0.75);
   
   -webkit-box-shadow: 9px 14px 26px -9px rgba(0,0,0,0.75);
   -moz-box-shadow: 9px 14px 26px -9px rgba(0,0,0,0.75);
   box-shadow: 9px 14px 26px -9px rgba(0,0,0,0.75);
}

#defaultCountdown span
{ 
    display: block; 
    float: left; 
    width: 55px; 
    height: 86px; 
    background: url(../img/counter.png) no-repeat 0px 0px; 
} 

#defaultCountdown span.image0 { background-position: -602px 0px; } 
#defaultCountdown span.image1 { background-position: -107px 0px; } 
#defaultCountdown span.image2 { background-position: -162px 0px; } 
#defaultCountdown span.image3 { background-position: -217px 0px; } 
#defaultCountdown span.image4 { background-position: -272px 0px; } 
#defaultCountdown span.image5 { background-position: -327px 0px; } 
#defaultCountdown span.image6 { background-position: -382px 0px; } 
#defaultCountdown span.image7 { background-position: -437px 0px; } 
#defaultCountdown span.image8 { background-position: -492px 0px; } 
#defaultCountdown span.image9 { background-position: -547px 0px; } 
#defaultCountdown span.imageSep { background-position: -52px 0px; } 
#defaultCountdown span.imageSpace { background-position: -0px 0px; } 

.container
{
    margin: 0 auto;
    width: 700px;
    height: 100px;
    text-align: center;
    margin-top: 10%;
}

.container b
{
    margin-bottom: 10px;
    display: block;
    font-size: 24px;
}

.seconds
{
    width: 110px;
    float: left;
    color: grey;
}

.days
{
    width: 165px;
    float: left;
    color: grey;
}

Добавить комментарий