Replace numbers in countdown JS

Question

Im sitting in a project, where i would like to display images instead of the numbers. But i can't figure out if it is possible in a JS countdown.

At the moment my code looks like this, but i don't get any results.

Hope somebody can help me?

<div id="countdown" onload="myFunction"></div>
<div id="newcountdown"></div>

CountDownTimer('02/19/2017 10:1 AM', 'countdown');
CountDownTimer('02/20/2017 10:1 AM', 'newcountdown');

function CountDownTimer(dt, id)
{
    var end = new Date(dt);

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById(id).innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById(id).innerHTML = days + 'days ';
        document.getElementById(id).innerHTML += hours + 'hrs ';
        document.getElementById(id).innerHTML += minutes + 'mins ';
        document.getElementById(id).innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
}

(function myFunction() {
var str = document.getElementById("countdown").innerHTML; 
var res = str.replace("2", "W3Schools");
document.getElementById("countdown").innerHTML = res;}

Answer 1

You want to

1. remove the line with the replace

2. change

    document.getElementById(id).innerHTML = days + 'days '; document.getElementById(id).innerHTML += hours + 'hrs '; document.getElementById(id).innerHTML += minutes + 'mins '; document.getElementById(id).innerHTML += seconds + 'secs'; 

to

    document.getElementById(id).innerHTML = getImg(days) + 'days ';
    document.getElementById(id).innerHTML += getImg(hours) + 'hrs ';
    document.getElementById(id).innerHTML += getImg(minutes) + 'mins ';
    document.getElementById(id).innerHTML += getImg(seconds) + 'secs';

and have

function getImg(num) {
  var digits = String(num).split(""), text="";
  for (var i=0;i<digits.length;i++) {
    text += '<img src="'+digits[i]+'.gif" />';
  }
  return text;
}

and have 0.gif, 1.gif ... 9.gif on your server

 function getImg(num) { var digits = String(num).split(""), text=""; for (var i=0;i<digits.length;i++) { text += '<img alt="'+digits[i]+'" src="'+digits[i]+'.gif" />'; } return text; } CountDownTimer('02/19/2017 10:1 AM', 'countdown'); CountDownTimer('02/20/2017 10:1 AM', 'newcountdown'); function CountDownTimer(dt, id) { var end = new Date(dt); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); document.getElementById(id).innerHTML = 'EXPIRED!'; return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); document.getElementById(id).innerHTML= getImg(days) + 'days ' + getImg(hours) + 'hrs ' + getImg(minutes) + 'mins ' + getImg(seconds) + 'secs'; } timer = setInterval(showRemaining, 1000); } 

 <div id="countdown"></div> <div id="newcountdown"></div>