Images Instead of Numbers on Countdown Script [Archive]

View Full Version : Images Instead of Numbers on Countdown Script

lonogod

11-27-2013, 07:12 PM

Hello all!

I wrote a countdown script for my mother's retirement. I'm pretty much a beginner at JavaScript so I know my script is not how it should be done, but it works flawlessly...so I'm happy with it. However, I want to make it so that images are displayed instead of numbers. For example, an image of a 1 and an image of a 7 would be displayed together instead of just the number 17.

I found this script on javascriptkit.com. (http://www.javascriptkit.com/script/cut9.shtml) I was wondering if it could be implemented into my current script without a complete re-write?

Any help would be greatly appreciated!

Script from JavaScript Kit:

<script type="text/javascript">

/***********************************************

* JavaScript Image Clock- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["c0.gif", "c1.gif", "c2.gif", "c3.gif", "c4.gif", "c5.gif", "c6.gif", "c7.gif", "c8.gif", "c9.gif", "cam.gif", "cpm.gif", "colon.gif"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}

imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12+""
for (var i=0; i<sections.length; i++){
if (sections[i].length==1)
sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
else
sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
}
return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
}

imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan"+(imageclock.instances++)
document.write('')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}

imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML

}

</script>

Here is the original script:

function countretire(){

var today = new Date();
var ayears = today.getFullYear();
var xyears = today.getFullYear();
var amonths = today.getMonth();
var xmonths = today.getMonth();
var adays = today.getDate();
var xdays = today.getDate();
var ahours = today.getHours();
var xhours = today.getHours();
var aminutes = today.getMinutes();
var xminutes = today.getMinutes();
var aseconds = today.getSeconds();
var xseconds = today.getSeconds();

if(aseconds) aseconds = 59 - aseconds;
if(xseconds == 0) aseconds = aseconds + 59;
if(aseconds <= 9) aseconds = "0" + aseconds;

if(aminutes) aminutes = 59 - aminutes;
if(xminutes == 0) aminutes = aminutes + 59;
if(aminutes <= 9) aminutes = "0" + aminutes;

if(ahours) ahours = 24 - ahours;
if(xhours >= 0) ahours = ahours + 16;
if(ahours >= 24) ahours = ahours - 24;
if(ahours <= 9) ahours = "0" + ahours;

if(xmonths == 0) adays = 31 - adays;
if(xyears != 2016 && xmonths == 1) adays = 28 - adays;
if(xyears == 2016 && xmonths == 1) adays = 29 - adays;
if(xmonths == 2) adays = 31 - adays;
if(xmonths == 3) adays = 30 - adays;
if(xmonths == 4) adays = 31 - adays;
if(xmonths == 5) adays = 30 - adays;
if(xmonths == 6) adays = 31 - adays;
if(xmonths == 7) adays = 31 - adays;
if(xmonths == 8) adays = 30 - adays;
if(xmonths == 9) adays = 31 - adays;
if(xmonths == 10) adays = 30 - adays;
if(xmonths == 11) adays = 31 - adays;
if(xhours >= 17) adays = adays - 1;
if(xyears != 2016 && xmonths == 0 && adays < 0) adays = adays + 28;
if(xyears == 2016 && xmonths == 0 && adays < 0) adays = adays + 29;
if(xmonths == 1 && adays < 0) adays = adays + 31;
if(xmonths == 2 && adays < 0) adays = adays + 30;
if(xmonths == 3 && adays < 0) adays = adays + 31;
if(xmonths == 4 && adays < 0) adays = adays + 30;
if(xmonths == 5 && adays < 0) adays = adays + 31;
if(xmonths == 6 && adays < 0) adays = adays + 31;
if(xmonths == 7 && adays < 0) adays = adays + 30;
if(xmonths == 8 && adays < 0) adays = adays + 31;
if(xmonths == 9 && adays < 0) adays = adays + 30;
if(xmonths == 10 && adays < 0) adays = adays + 31;
if(xmonths == 11 && adays < 0) adays = adays + 31;
if(adays <= 9) adays = "0" + adays;

if(amonths) amonths = 11 - amonths;
if(xmonths >= 0) amonths = amonths + 8;
if(amonths >= 12) amonths = amonths - 12;
if(xmonths == 0 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xyears != 2016 && xmonths == 1 && xdays == 28 && xhours >= 17) amonths = amonths - 1;
if(xyears == 2016 && xmonths == 1 && xdays == 29 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 2 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 3 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 4 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 5 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 6 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 7 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 8 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 9 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 10 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 11 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(amonths < 0) amonths = amonths + 12;
if(amonths <= 9) amonths = "0" + amonths;

if(ayears) ayears = 2017 - ayears;
if(xmonths >= 7) ayears = ayears - 1;
if(xmonths == 7 && xdays <= 30) ayears = ayears + 1;
if(xmonths == 7 && xdays == 31 && xhours <= 16) ayears = ayears + 1;
if(ayears <= 9) ayears = "0" + ayears;

if(today){
dispElapsed = "" + ayears + ":" + amonths + ":" + adays + ":" + ahours + ":" + aminutes + ":" + aseconds + "";
}
if(xyears == 2017 && xmonths == 7 && xdays == 31 && xhours >= 17){
dispElapsed = "" + "You made it! You're Retired! Congratulations! No one deserves it more than you! I love you!" + "";
}
if(xyears == 2017 && xmonths >= 8){
dispElapsed = "" + "You made it! You're Retired! Congratulations! No one deserves it more than you! I love you!" + "";
}
if(xyears >= 2018){
dispElapsed = "" + "You made it! You're Retired! Congratulations! No one deserves it more than you! I love you!" + "";
}
var e = document.getElementById("countretire");
if(!e) return;
if("innerHTML" in e) e.innerHTML = dispElapsed;
setTimeout("countretire()", 1000);
}

vwphillips

11-28-2013, 12:19 AM

the images are 0.gif to 9.gif attached zip file

see the changes in red

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#countretire IMG {
width:30px;
}

/*]]>*/
</style></head>

<body>

the images are 0.gif to 9.gif
<div id="countretire" ></div>
<script type="text/javascript">
/*<![CDATA[*/
function countretire(){

var today = new Date();
var ayears = today.getFullYear();
var xyears = today.getFullYear();
var amonths = today.getMonth();
var xmonths = today.getMonth();
var adays = today.getDate();
var xdays = today.getDate();
var ahours = today.getHours();
var xhours = today.getHours();
var aminutes = today.getMinutes();
var xminutes = today.getMinutes();
var aseconds = today.getSeconds();
var xseconds = today.getSeconds();

if(aseconds) aseconds = 59 - aseconds;
if(xseconds == 0) aseconds = aseconds + 59;
if(aseconds <= 9) aseconds = "0" + aseconds;

if(aminutes) aminutes = 59 - aminutes;
if(xminutes == 0) aminutes = aminutes + 59;
if(aminutes <= 9) aminutes = "0" + aminutes;

if(ahours) ahours = 24 - ahours;
if(xhours >= 0) ahours = ahours + 16;
if(ahours >= 24) ahours = ahours - 24;
if(ahours <= 9) ahours = "0" + ahours;

if(xmonths == 0) adays = 31 - adays;
if(xyears != 2016 && xmonths == 1) adays = 28 - adays;
if(xyears == 2016 && xmonths == 1) adays = 29 - adays;
if(xmonths == 2) adays = 31 - adays;
if(xmonths == 3) adays = 30 - adays;
if(xmonths == 4) adays = 31 - adays;
if(xmonths == 5) adays = 30 - adays;
if(xmonths == 6) adays = 31 - adays;
if(xmonths == 7) adays = 31 - adays;
if(xmonths == 8) adays = 30 - adays;
if(xmonths == 9) adays = 31 - adays;
if(xmonths == 10) adays = 30 - adays;
if(xmonths == 11) adays = 31 - adays;
if(xhours >= 17) adays = adays - 1;
if(xyears != 2016 && xmonths == 0 && adays < 0) adays = adays + 28;
if(xyears == 2016 && xmonths == 0 && adays < 0) adays = adays + 29;
if(xmonths == 1 && adays < 0) adays = adays + 31;
if(xmonths == 2 && adays < 0) adays = adays + 30;
if(xmonths == 3 && adays < 0) adays = adays + 31;
if(xmonths == 4 && adays < 0) adays = adays + 30;
if(xmonths == 5 && adays < 0) adays = adays + 31;
if(xmonths == 6 && adays < 0) adays = adays + 31;
if(xmonths == 7 && adays < 0) adays = adays + 30;
if(xmonths == 8 && adays < 0) adays = adays + 31;
if(xmonths == 9 && adays < 0) adays = adays + 30;
if(xmonths == 10 && adays < 0) adays = adays + 31;
if(xmonths == 11 && adays < 0) adays = adays + 31;
if(adays <= 9) adays = "0" + adays;

if(amonths) amonths = 11 - amonths;
if(xmonths >= 0) amonths = amonths + 8;
if(amonths >= 12) amonths = amonths - 12;
if(xmonths == 0 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xyears != 2016 && xmonths == 1 && xdays == 28 && xhours >= 17) amonths = amonths - 1;
if(xyears == 2016 && xmonths == 1 && xdays == 29 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 2 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 3 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 4 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 5 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 6 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 7 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 8 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 9 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 10 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 11 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(amonths < 0) amonths = amonths + 12;
if(amonths <= 9) amonths = "0" + amonths;

if(ayears) ayears = 2017 - ayears;
if(xmonths >= 7) ayears = ayears - 1;
if(xmonths == 7 && xdays <= 30) ayears = ayears + 1;
if(xmonths == 7 && xdays == 31 && xhours <= 16) ayears = ayears + 1;
if(ayears <= 9) ayears = "0" + ayears;
var y=(ayears+'').split('');
var m=(amonths+'').split('')
var d=(adays+'').split('')
var h=(ahours+'').split('')
var mi=(aminutes+'').split('')
var s=(aseconds+'').split('')
if(today){
dispElapsed = "<IMG src=" + y[0] + ".gif ><IMG src=" + y[1] + ".gif >:<IMG src=" + m[0] + ".gif ><IMG src=" + m[1] + ".gif >:<IMG src=" + d[0] + ".gif ><IMG src=" + d[1] + ".gif >:<IMG src=" + h[0] + ".gif ><IMG src=" + h[1] + ".gif >:<IMG src=" + mi[0] + ".gif ><IMG src=" + mi[1] + ".gif >:<IMG src=" + s[0] + ".gif ><IMG src=" + s[1] + ".gif >";
}
if(xyears == 2017 && xmonths == 7 && xdays == 31 && xhours >= 17){
dispElapsed = "" + "You made it! You're Retired! Congratulations! No one deserves it more than you! I love you!" + "";
}
if(xyears == 2017 && xmonths >= 8){
dispElapsed = "" + "You made it! You're Retired! Congratulations! No one deserves it more than you! I love you!" + "";
}
if(xyears >= 2018){
dispElapsed = "" + "You made it! You're Retired! Congratulations! No one deserves it more than you! I love you!" + "";
}
var e = document.getElementById("countretire");
if(!e) return;
if("innerHTML" in e) e.innerHTML = dispElapsed;
setTimeout("countretire()", 1000);
}
countretire();

/*]]>*/
</script>
</body>

</html>

lonogod

11-28-2013, 01:27 PM

That is absolutely incredible! I can't thank you enough. Happy Thanksgiving!