How to make timer countdown with images?

Good day!

Can someone suggest a link to a good article or maybe right here will lead me to a code example?

I want to make a beautiful countdown timer to any event to use for each digit image png or jpg. That is you can either cut directly into individual files, or to use the area of the sprite where all of these numbers together.
Just these figures are prepared in photoshop, they apply filters, textures, and so on. It is naturally not possible to transfer your css.
Well, the timer seems to be jquery?

Does anyone have any ideas?
I would be very grateful
July 8th 19 at 12:02
3 answers
July 8th 19 at 12:04
You need a normal timer, except instead of numbers, put pictures relevant
1. make an array/dictionary of numbers, where the key corresponds to the number of digits in the picture
2. display the time in the desired format (12:23)
3. model all numbers in the row for the equivalent with pictures

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">"
Thanks for the reply!
Humbly request a more detailed response, well, there is such a template
codepen.io/Capablanca/pen/WxRgGV
where the time reference already set
You can register an image of at least one digit?
here is a link to the image https://i.yapx.ru/BSVY.png
For a couple of hours sitting, do nothing - Xavier.Schowalter96 commented on July 8th 19 at 12:07
Found a solution and made that option
codepen.io/Capablanca/pen/mERzJN

the only thing I can't understand why it shows the wrong time...
Any ideas you have? - Xavier.Schowalter96 commented on July 8th 19 at 12:10
July 8th 19 at 12:06
The idea is to create an array of numbers 0-9 and two symbols : and .
To create an array of images of numbers 0-9 and two symbols : and .
And create a separate thread/service cycle:
while(true){
}
Translate time value into a string the toString () to parse a string into its component parts, and accordingly each symbol to output.
thank you, if possible, more detail... I don't know Java at all, I just need to edit at least a template codepen.io/Capablanca/pen/WxRgGV - Xavier.Schowalter96 commented on July 8th 19 at 12:09
July 8th 19 at 12:08
Use codepen.io and logical thinking for the formation of matter site search get rid of reinventing the wheel :))
Found a solution and made that option
codepen.io/Capablanca/pen/mERzJN

the only thing I can't understand why it shows the wrong time...
Any ideas you have? - Xavier.Schowalter96 commented on July 8th 19 at 12:11
All there is right shows.
var fut = new Date("Oct 06 2016 18:00:00 GMT+0200").getTime()
Replace with the desired date and all. And take into account the server time GMT+0200 - Xavier.Schowalter96 commented on July 8th 19 at 12:14
Yes as well then?) here is the date of 26 October, written the script shows that until that date, 2 days and a couple hours) the same can Not be to have seemed right, and I have no - Xavier.Schowalter96 commented on July 8th 19 at 12:17
: ahh, well, everything, I realized I have just the number of days in two digit format is displayed, and I swung on a date with a three-digit number difference. otherwise, everything works as it should)
thank you!!! - Xavier.Schowalter96 commented on July 8th 19 at 12:20

Find more questions by tags HTMLJavaPNG