Как сделать таймер отсчета с изображениями?

Question

[Capablanca]

Доброго дня!

Может кто-то подсказать ссылку на хорошую статью, или может прямо тут приведут мне пример кода?

Хочется сделать красивый таймер отсчета до какого-либо события, чтобы он использовал для каждой цифры изображение png или jpg. То есть можно либо порезать прямо на отдельные файлики, либо чтобы он использовал область спрайта где все эти цифры собраны вместе.
Просто эти цифры подготовлены в фотошопе, на них наложены фильтры, текстуры и так далее. Это естественно, не удастся передать средствами css.
Ну и сам таймер видимо нужно писать на jquery?

Есть у кого идеи?
буду очень благодарен

Answer 1

[Анатолий]

Вам нужен обычный таймер отсчета, только вместо цифр ставите картинки соответствующие
1. делаем массив/словарь цифр, где ключ соответствует числу цифры на картинке
2. выводим время в нужном формате (12:23)
3. заменяем все цифры в строке на эквивалент с картинками

var images = {"1": "/img/1.jpg", "2": "/img/2.jpg", "3": "/img/3.jpg", ":": "/img/splitter.jpg"}; 
"12:23".split('').map((item) => { 
    return "<img src='" + images[item] + "'>" 
}).join('')
//"<img src='/img/1.jpg'><img src='/img/2.jpg'><img src='/img/splitter.jpg'><img src='/img/2.jpg'><img src='/img/3.jpg'>"

Comments

[Capablanca]

Спасибо за ответ!
Скромно прошу более развернутого ответа, ну вот есть например такой шаблончик
codepen.io/Capablanca/pen/WxRgGV
где время отсчета уже задано
Вы можете прописать изображение хотя бы для одной цифры?
вот ссылка на изображение https://i.yapx.ru/BSVY.png
Уже пару часов сижу, вообще ничего не получается

[Capablanca]

Нашел решение и сделал вот такой вариант
codepen.io/Capablanca/pen/mERzJN

единственное, не могу разобраться, почему показывается неправильное время отсчета...
Есть идеи у вас?

Answer 2

[Konstantin Malyarov]

Идея такая, создать массив цифр 0-9 и двух символов : и .
Создать массив картинок с цифрами 0-9 и двух символов : и .
И создать в отдельном потоке/сервисе цикл:
while(true){
}
Переводить значение времени в строку toString(), разбирать строку на составные части, и соответственно каждому символу выдавать значение.

Comments

[Capablanca]

спасибо, если можно, поподробнее... я яву не знаю совсем, мне просто нужно подредактировать хотя бы такой шаблон codepen.io/Capablanca/pen/WxRgGV

Answer 3

[Олег]

Использование codepen.io и логического мышления для формирования вопроса поиска по сайту избавит от изобретения велосипеда :))

Comments

[Capablanca]

Нашел решение и сделал вот такой вариант
codepen.io/Capablanca/pen/mERzJN

единственное, не могу разобраться, почему показывается неправильное время отсчета...
Есть идеи у вас?

[Олег]

Все там правильно показывает.
var fut = new Date("Oct 06 2016 18:00:00 GMT+0200").getTime()
Заменить на нужную дату и все. И учитывай время сервера GMT+0200

[Capablanca]

Олег: да как так-то?) вот стоит дата 26 октября, написанный скрипт показывает что до этой даты 2 дня и пара часов) Не может же быть чтобы у вас показывалось правильно, а у меня нет

[Capablanca]

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