The Finished Product

Simply open the javascript file and manually enter a date and time. I chose Christmas. Why not?

How It's Done

HTML

<div class="timerArea">
   <h4>Christmas Countdown Timer</h4>
   <div class="timeSection">
      <div id="days2go" class="timebox"></div>
      <div id="hours2go" class="timebox"></div>
      <div id="minutes2go" class="timebox"></div>
      <div id="seconds2go" class="timebox"></div>
   </div>
</div>

<script>cd2td();</script>              
               

CSS

.timerArea {
   position: relative;
   height: 110px;
   width: 410px;
   margin: 30px;
   padding: 5px 10px 10px;
   background-color: #a00;
   text-align: center;
   border-radius: 10px;
   border: 2px solid #600;
   box-shadow: inset 1px 1px 5px rgba(0,0,0,0.3), inset 1px 1px 20px rgba(0,0,0,0.5);
}
.timerArea h4 {
   position: relative;
   font-family: sans-serif;
   color: #ffffff;
   margin-bottom: 20px;
   text-shadow: 0px 1px 0px rgba(0,0,0,1);
}
.timeSection {
   position: relative;
   bottom: 5px;
   left: 72px;
   width: 245px;
   height: 40px;
}
.timebox {
   float: left;
   height: 30px;
   width: 50px;
   font-size: 18px;
   line-height: 30px;
   text-align: center;
   border: 2px solid white;
   border-radius: 5px;
   background: #232323;
   box-shadow: inset 2px 2px 20px rgba(255,255,255,0.3);
   padding: 0px;
   margin: 5px;
   color: red;
}               
               

JAVASCRIPT

A function call to cd2td(); inside bodysection

<script>cd2td();</script>

The function cd2td()

	// FUNCTION CountDown 2 TargetDate
	function cd2td() {			
		var now = new Date();	// today's date & time
		var year = now.getFullYear();
		var td = new Date("December 25,"+ year +" 00:01:00");  // target date & time
		var timeDiff = td.getTime() - now.getTime();

What to do once the target date (td) has been reached.

		if (timeDiff <= 0) {
			clearTimeout(time-looper);
			// run any code needed for countdown completion
			document.write("Christmas is here!!");
		}

Retrieving the seconds, minutes, hours and days

		var seconds = Math.floor(timeDiff / 1000);  // Math.floor rounds a number downward to nearest integer; 1000 milliseconds = 1 second
		var minutes = Math.floor(seconds / 60);
		var hours = Math.floor(minutes / 60);
		var days = Math.floor(hours / 24);		

		hours %= 24;		// % Modulus; hours = hours/24; returns the remainder after dividing the specific values. the remainder is the modulus
		minutes %= 60;
		seconds %= 60;

Use document.getElementById to insert data into the viewport.

		document.getElementById("days2go").textContent = days;
		document.getElementById("hours2go").textContent = hours;
		document.getElementById("minutes2go").textContent = minutes;
		document.getElementById("seconds2go").textContent = seconds;

The timer function. It calls itself every second.

		var time_looper = setTimeout('cd2td()',1000);