Results 1 to 3 of 3

Thread: Images Instead of Numbers on Countdown Script

  1. #1
    Join Date
    Nov 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Images Instead of Numbers on Countdown Script

    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. 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:
    Code:
    <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('<span id="'+this.spanid+'"></span>')
    		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:
    Code:
    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 = "<font face='Arial' size='6'><b><span class='datetime'>" + ayears + ":" + amonths + ":" + adays + ":" + ahours + ":" + aminutes + ":" + aseconds + "</span></b></font>";
    }
    if(xyears == 2017 && xmonths == 7 && xdays == 31 && xhours >= 17){
    dispElapsed = "<font face='Arial' size='6'><b><span class='datetime'>" + "You made it!  You're Retired!<br><br>Congratulations!<br><br>No one deserves it more than you!<br><br>I love you!" + "</span></b></font>";
    }
    if(xyears == 2017 && xmonths >= 8){
    dispElapsed = "<font face='Arial' size='6'><b><span class='datetime'>" + "You made it! You're Retired!<br><br>Congratulations!<br><br>No one deserves it more than you!<br><br>I love you!" + "</span></b></font>";
    }
    if(xyears >= 2018){
    dispElapsed = "<font face='Arial' size='6'><b><span class='datetime'>" + "You made it!  You're Retired!<br><br>Congratulations!<br><br>No one deserves it more than you!<br><br>I love you!" + "</span></b></font>";
    }
    var e = document.getElementById("countretire");
    if(!e) return;
    if("innerHTML" in e) e.innerHTML = dispElapsed;
    setTimeout("countretire()", 1000);
    }

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

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

    see the changes in red


    Code:
    <!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 = "<font face='Arial' size='6'><b><span class='datetime'><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 ></span></b></font>";
    }
    if(xyears == 2017 && xmonths == 7 && xdays == 31 && xhours >= 17){
    dispElapsed = "<font face='Arial' size='6'><b><span class='datetime'>" + "You made it!  You're Retired!<br><br>Congratulations!<br><br>No one deserves it more than you!<br><br>I love you!" + "</span></b></font>";
    }
    if(xyears == 2017 && xmonths >= 8){
    dispElapsed = "<font face='Arial' size='6'><b><span class='datetime'>" + "You made it! You're Retired!<br><br>Congratulations!<br><br>No one deserves it more than you!<br><br>I love you!" + "</span></b></font>";
    }
    if(xyears >= 2018){
    dispElapsed = "<font face='Arial' size='6'><b><span class='datetime'>" + "You made it!  You're Retired!<br><br>Congratulations!<br><br>No one deserves it more than you!<br><br>I love you!" + "</span></b></font>";
    }
    var e = document.getElementById("countretire");
    if(!e) return;
    if("innerHTML" in e) e.innerHTML = dispElapsed;
    setTimeout("countretire()", 1000);
    }
    countretire();
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Attached Files Attached Files
    Last edited by vwphillips; 11-28-2013 at 04:38 AM. Reason: attached zip file of images
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    lonogod (11-28-2013)

  4. #3
    Join Date
    Nov 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

Similar Threads

  1. setting Universal Countdown to a daily countdown not a specific date.
    By droog in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 06-27-2012, 02:38 PM
  2. Universal Countdown Script as a daily happy hour countdown
    By boobax in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-21-2009, 10:37 PM
  3. Looking for a script with alphabetical page numbers
    By linux1880 in forum Looking for such a script or service
    Replies: 1
    Last Post: 05-28-2008, 06:56 PM
  4. Questions about the random numbers script
    By webdesignee in forum JavaScript
    Replies: 15
    Last Post: 04-17-2006, 10:02 PM
  5. Help, Images instead on numbers on fly
    By mnemonik23 in forum JavaScript
    Replies: 0
    Last Post: 01-26-2005, 07:44 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •