CSS Codes
CSS Layouts
Results 1 to 3 of 3

Thread: Images Instead of Numbers on Countdown Script

  1. 11-27-2013, 07:12 PM #1
    lonogod
    lonogod is offline New Comer (less than 5 posts)
    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);
}
    Reply With Quote Reply With Quote
  2. 11-28-2013, 12:19 AM #2
    vwphillips
    vwphillips is offline Elite Coders
    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/
    Reply With Quote Reply With Quote

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

    lonogod (11-28-2013)
  4. 11-28-2013, 01:27 PM #3
    lonogod
    lonogod is offline New Comer (less than 5 posts)
    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!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules