How to Customize a Countdown Timer
Whether you have a business online or write a personal blog, a countdown timer for your website can be an important feature. You can let your online visitors know how long they'll have to wait until a particular event or promotion happens at your site, when an item will come in stock or when a certain movie is released. While many standard timers are available, a customized timer can personalize your website.
Other People Are Reading
Things You'll Need
- Website management software or online management system
- Access to HTML code for the timer
Instructions
-
-
1
Open your website management software or your online (or blog) management system. Access the HTML code for the page on which you'd like to place your countdown timer. Choose a spot relative to the information you're counting down to, such as a movie release countdown timer placed next to a paragraph discussing the movie. You may also wish to place the timer at the top of the page in the header section if the timer is a countdown to a special event.
-
2
Copy and paste the following code within your HTML code where you'd like the timer to appear on your site:
<SCRIPT type="text/javascript">
function mesiqg8(theyear,themonth,theday,thehour,themin,thesec)
{yr=theyear;mo=themonth;da=theday;hr=thehour;min=themin;sec=thesec}
mesiqg8(YEAR,MONTH,DAY,HOUR,MINUTE,SECOND)
var occasion = "TITLE"
var message_on_occasion= "MESSAGE"
var countdownwidth='600px'
var countdownheight='35px'
var countdownbgcolor='transparent'
var opentags='<font face="Garamond" color="black"><Larger><b>'
var closetags='<b></larger></font>'
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''
function tes3qqxk(){
if (document.layers)
document.countdownnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById("countdownie")
: countdownie
countdown( )}
if (document.all||document.getElementById)
document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>')
window.onload=tes3qqxk
function countdown(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags +message_on_occasion +closetags)
document.countdownnsmain.document.countdownnssub.document.close()}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags +message_on_occasion +closetags
return
}
else if (dday<=-1){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags +"Reset Countdown"+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags +"Please Check Countdown "+closetags
return
}
else{
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags + dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until " +occasion +closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags +dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until " +occasion +closetags
}
setTimeout("countdown()",1000)
}
</script>
<ilayer id="countdownnsmain" width=&{countdownwidth}; height=&{countdownheight}; bgColor=&{countdownbgcolor}; visibility=hide><layer id="countdownnssub" width=&{countdownwidth}; height=&{countdownheight}; left=0 top=0></layer></ilayer> -
-
3
Replace the year, month, day, hour, minute and second for your countdown timer in the code where those items are listen in all capital letters. Do the same for the title of your countdown and the message of your countdown. These are the basics of your countdown timer.
-
4
Customize the width and height of your timer by editing the "var countdownwidth" and "var countdownheight" part of the code. Play around with different numbers until you find the perfect width and height for your timer. Customize the font style, size and color using the "var opentags='<font face="Garamond" color="black">" part of the code. To change the color, simply change "black" to any basic color you'd like (such as white, red or blue). You may also use an HTML color code, like #FF8040, which is orange. To change the size of your text, add to the inside of the <> markings next to the color: size="NUMBER." Then add a number and test different sizes for your font.
-
1
Tips & Warnings
Try different colors, font sizes and messages to ensure that your countdown timer looks exactly how you'd like it to look on your site.
References
Resources
- Photo Credit digital clock image by JoLin from Fotolia.com
