CODEWITHSUNDEEP
javascripthtmlcssdatetime
Bennnn
Bennnn

Reputation: 33

Need countdown timer to display pictures instead of words and to constantly update them

I have a countdown clock for my website and I want to make it so that instead of displaying text it displays pictures instead.

E.g. say if theres 200 days left I would want it to display an image with a 2, an image with a 0 and another image with a 0.

So basically I want it so that each numeral being displayed in text will be displayed by a picture instead. Here is the code that outputs the text:

if(r.d != 0){out += r.d +" "+((r.d==1)?"day":"days")+" ";}
out += (r.h<=9?'0':'')+r.h +" "+((r.h==1)?"hour":"hours")+" ";
out += (r.m<=9?'0':'')+r.m +" "+((r.m==1)?"min":"mins")+" ";
out += (r.s<=9?'0':'')+r.s +" "+((r.s==1)?"sec":"secs")+" ";

It's constantly updating and thus i need the pictures to be constantly updating.

I have been able to make one but it only updates the pictures every time you reload the browser.

I'm also not sure how to make it so that the browser only loads the pictures, say a picture of a 2 once rather than reloading that picture every time a 2 comes up in the timer.

Upvotes: 0

Views: 363

Answers (1)

Mi-Creativity
Mi-Creativity

Reputation: 9664

This could be achieved in 2 ways, either as stated in the comment by @Jasen with images been set in CSS as background-image where the image corresponds that integer, for example if the integer value is 4, a .number-4 class name gets assigned to it.

Making use of CSS background images: JS Fiddle 1

var testDiv = document.getElementById('test');

clock();

function clock() {
  var d = new Date(),
    hour = d.getHours(),
    min = d.getMinutes(),
    sec = d.getSeconds(),
    theHTML = '',
    theData, item;

  min = (min < 10) ? '0' + min : min;
  sec = (sec < 10) ? '0' + sec : sec;
  theData = '200 Days, and ' + hour + ":" + min + ":" + sec;
  theData = theData.split('');

  for (var i = 0; i < theData.length; i++) {
    item = parseInt(theData[i]);
    if (isNaN(item)) {
      theHTML += '<span class="not-num">' + theData[i] + '</span>';
    } else {
      theHTML += '<span class="nums number-' + theData[i] + '"></span>';
    }
  }
  testDiv.innerHTML = theHTML;
  setTimeout(clock, 1000);
}
.not-num {
  font-size: 30px;
}

.nums {
  width: 50px;
  height: 80px;
  background-color: #EEE;
  border: 1px solid gray;
  margin: 30px 2px 2px 2px;
  text-align: center;
  background: #EEE no-repeat;
  display: inline-block;
}

.number-0 {background-image: url('//placehold.it/50x80/?text=0');}
.number-1 {background-image: url('//placehold.it/50x80/?text=1');}
.number-2 {background-image: url('//placehold.it/50x80/?text=2');}
.number-3 {background-image: url('//placehold.it/50x80/?text=3');}
.number-4 {background-image: url('//placehold.it/50x80/?text=4');}
.number-5 {background-image: url('//placehold.it/50x80/?text=5');}
.number-6 {background-image: url('//placehold.it/50x80/?text=6');}
.number-7 {background-image: url('//placehold.it/50x80/?text=7');}
.number-8 {background-image: url('//placehold.it/50x80/?text=8');}
.number-9 {background-image: url('//placehold.it/50x80/?text=9');}
<div id="test">200 Days</div>

Or by replacing each integer character with an img element and set its src to make the src has a respective image, same code as above except this change:

JS Fiddle 2

if (isNaN(item)) {
  theHTML += '<span class="not-num">' + theData[i] + '</span>';
} else {
  theHTML += '<img src="//placehold.it/50x80?text=' +theData[i]+ '">';
}

and we get rid of the CSS classes number-X.

Both solution do the same thing, we take the final string of timer "or countdown" and convert from string into an object using javascript .split() function and we parseInt() it, if it is a number we replace it with and image or set its background image, else just wrap them in another span.not-num class, after doing so we inject the final string into the #result div.

The first solution is better because image is kind of preloaded already, also. unlike using images with changing src value, it won't flicker after it gets loaded first time it just flips nicely.

Upvotes: 1

Related Questions