Advanced Search

Return to Snippet

Revision: 60113
at October 21, 2012 03:35 by o0110o
Updated Code 
<style type="text/css">
  .countDown {
    font-family:"Helvetica Neue",Helvetica,Calibri,"Liberation Sans",Arial,sans-serif;
    font-weight:300;
    letter-spacing:0.5px;
    text-align:center;
  }
</style>
<script type="text/javascript">
  currentDate = new Date();
  zeroDay = new Date("January 1, 2013"); // <===|INSERT_DATE_HERE
  msPerDay = 864E5;
  time = (zeroDay.getTime() - currentDate.getTime());
  days= time / msPerDay;
  dayCount = Math.floor(days);
  image = parseInt(dayCount) + 2;
  countDown ="<div id='countDown' class='countDown'>It's coming. Are you ready?<br>"+dayCount+" days until "+zeroDay+".</div>";
  if (dayCount > 30){document.write(countDown);}
  else if (dayCount <= 30){document.write("<img id='countDown' class='countDown' src='"+image+".jpg' alt='It's coming.'/>");}
  else {document.write("<img id='countDown' class='countDown' src='1.jpg' alt=''It's coming.'/>");}
</script>

Revision: 60112
at October 21, 2012 03:32 by o0110o
Initial Code 
<style type="text/css">
.countDown {  font-family:"Helvetica Neue",Helvetica,Calibri,"Liberation Sans",Arial,sans-serif; font-weight:300;letter-spacing:0.5px;text-align:center; }
</style>
<script type="text/javascript">
currentDate = new Date();
zeroDay = new Date("January 1, 2013"); // <===|INSERT_DATE_HERE
msPerDay = 864E5;
time = (zeroDay.getTime() - currentDate.getTime());
days= time / msPerDay;
dayCount = Math.floor(days);
image = parseInt(dayCount) + 2;
countDown ="<div id='countDown' class='countDown'>It's coming. Are you ready?<br>"+dayCount+" days until "+zeroDay+".</div>";
if (dayCount > 30){document.write(countDown);}
else if (dayCount <= 30){document.write("<img id='countDown' class='countDown' src='"+image+".jpg' alt='It's coming.'/>");}
else {document.write("<img id='countDown' class='countDown' src='1.jpg' alt=''It's coming.'/>");}
</script>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
Set the desired date within the function. 
Make some images and label them "1.jpg, 2.jpg, 3.jpg, etc...".
That's how it's done.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
A function that uses images to perform a countdown.

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
javascript, function, images

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript