Countdown Timer

Developer
Boyd Massie
Size
3,001 Kb
Views
10,115
  1. Countdown Timer Previews
  2. Countdown Timer HTML Codes
  3. Countdown Timer CSS Codes
  4. Countdown Timer JS Codes

How do I make an 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 28 November 2022, Monday.

Countdown Timer Previews
IQ Test

Countdown Timer - Script Codes 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 - Script Codes 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 - Script Codes 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};
Countdown Timer - Script Codes
Countdown Timer - Script Codes
Home Page Home
Developer Boyd Massie
Username massiebn
Uploaded November 28, 2022
Rating 3
Size 3,001 Kb
Views 10,115
Do you need developer help for Countdown Timer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Boyd Massie (massiebn) Script Codes
Name
Inline Frame PDF
Responsive Table
QuickFlip
Drag and Drop Images
Round-A-Bout Image Showcase
Page Peel
JQuery Popeye Gallery
JQuery Quiz
Image Hover
Desaturate an image with CSS
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!