How to make a countdown timer with images?

Question

Java

Good day!
Can someone suggest a link to a good article, or can they give me a code example right here?
I would like to make a beautiful countdown timer before any event, so that it uses a png or jpg image for each digit. That is, you can either cut it directly into separate files, or have it use the sprite area where all these numbers are gathered together.
It's just that these numbers are prepared in Photoshop, filters, textures, and so on are superimposed on them. This, of course, cannot be conveyed using css.
Well, the timer itself apparently needs to be written in jQuery?
Does anyone have any ideas?
I will be very grateful

Answer 1

You need a regular countdown timer, but instead of numbers, put the corresponding pictures
1. make an array / dictionary of numbers, where the key corresponds to the number of numbers in the picture
2. display the time in the desired format (12:23)
3. replace all the numbers in the string with 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'>"

Answer 2

The idea is to create an array of numbers 0-9 and two characters : and .
Create an array of pictures with numbers 0-9 and two characters : and .
And create a cycle in a separate thread/service:
while(true){
}
Translate the time value into a toString() string, parse the string into its component parts, and give each character a value accordingly.

Answer 3

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