Countdown Timer

Lightweight countdown timer to build anticipation. What is a countdown timer How do you make a countdown timer? This script and codes were developed by Boyd Massie on 01 February 2022, Tuesday.

How do I make an countdown timer?
  1. Countdown Timer Previews
  2. Countdown Timer HTML Codes
  3. Countdown Timer CSS Codes
  4. Countdown Timer JS Codes
Countdown Timer Previews

Countdown Timer HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Countdown Timer</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!-- Code & Explanation can be found here: https://andrewu.co.uk/clj/countdown/ 

Pretend that your current timezone is EDT (Eastern Daylight Time) — this would be because we are pretending that it is summer time and also that you live on the East-Coast of the USA.

Now, you decide that you want to create a countdown timer counting down to the New Year celebrations next year. However, New Year for you would actually occur in the EST (Eastern Standard Time) timezone because New Year is in winter and the clocks will change in the Fall.

We remember the golden rule that you use the timezone as it will be at the event you are counting down to. This would mean that your countdown date and time should use the EST timezone (GMT - 5 hours), so the countdown date you would use would end in “GMT-05:00” making your countdown HTML look as follows:

<span id="countdown1">2011-01-01 00:00:00 GMT-05:00</span> 
-->

<h1>2015 is closer than you think!</h1>
<p><span class="countdown" id="countdown1">2015-1-1 00:00:00 GMT-07:00</span></p>
  
    <script src="js/index.js"></script>

</body>
</html>

Countdown Timer CSS Codes

h1 {
		  color:#333333;
		  font-size:25px;
		  font-family:Arial, Helvetica, sans-serif;
		  font-weight:bold;
		  border-bottom:1px dotted #333333;
		  width:350px;
	}
	
	.countdown {
		  color:#06C;
		  font-size:20px;
		  font-family:Arial, Helvetica, sans-serif;
  		font-weight:normal;
	}

Countdown Timer JS Codes

// Andrew Urquhart : CountDown Timer : https://andrewu.co.uk/clj/countdown/
function CD_T(id,e){var n=new Date();CD_D(+n,id,e);setTimeout("if(typeof CD_T=='function'){CD_T('"+id+"',"+e+")}",1100-n.getMilliseconds())};function CD_D(n,id,e){var ms=e-n;if(ms<=0) ms*=-1;var d=Math.floor(ms/864E5);ms-=d*864E5;var h=Math.floor(ms/36E5);ms-=h*36E5;var m=Math.floor(ms/6E4);ms-=m*6E4;var s=Math.floor(ms/1E3);if(CD_OBJS[id]){CD_OBJS[id].innerHTML=d+" day"+(d==1?" ":"s ")+CD_ZP(h)+"h "+CD_ZP(m)+"m "+CD_ZP(s)+"s"}};function CD_ZP(i){return(i<10?"0"+i:i)};function CD_Init(){var pref="countdown";var objH=1;if(document.getElementById||document.all){for(var i=1;objH;++i){var id=pref+i;objH=document.getElementById?document.getElementById(id):document.all[id];if(objH&&(typeof objH.innerHTML)!='undefined'){var s=objH.innerHTML;var dt=CD_Parse(s);if(!isNaN(dt)){CD_OBJS[id]=objH;CD_T(id,dt.valueOf());if(objH.style){objH.style.visibility="visible"}}else {objH.innerHTML=s+"<a href=\"https://andrewu.co.uk/clj/countdown/\" title=\"Countdown Error:Invalid date format used,check documentation (see link)\">*</a>"}}}}};function CD_Parse(strDate){var objReDte=/(\d{4})\-(\d{1,2})\-(\d{1,2})\s+(\d{1,2}):(\d{1,2}):(\d{0,2})\s+GMT([+\-])(\d{1,2}):?(\d{1,2})?/;if(strDate.match(objReDte)){var d=new Date(0);d.setUTCFullYear(+RegExp.$1,+RegExp.$2-1,+RegExp.$3);d.setUTCHours(+RegExp.$4,+RegExp.$5,+RegExp.$6);var tzs=(RegExp.$7=="-"?-1:1);var tzh=+RegExp.$8;var tzm=+RegExp.$9;if(tzh){d.setUTCHours(d.getUTCHours()-tzh*tzs)}if(tzm){d.setUTCMinutes(d.getUTCMinutes()-tzm*tzs)};return d}else {return NaN}};var CD_OBJS=new Object();if(window.attachEvent){window.attachEvent('onload',CD_Init)}else if(window.addEventListener){window.addEventListener("load",CD_Init,false)}else {window.onload=CD_Init};
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.