clayb/countdown-clock.html

## countdown-clock.html
<!DOCTYPE html>
<html>
<head>
  <title>Countdown Clock</title>
  <meta charset="utf-8"/>
<style type="text/css">
#countdown-container {
  display: -ms-flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  text-align: center;
  margin: 0 auto;
  width: 256px;
}
.countdown-digit-container {
  width: 25%;
}
.countdown-digit-title {
  font: bold 12px 'helvetica', sans-serif;
}
.countdown-digits {
  font: 24px 'times', serif;
}
</style>
</head>
<body>
  <div id="countdown-container">
    <div class="countdown-digit-container">
      <h6 class="countdown-digit-title">Days</h6>
      <div id="countdown-days" class="countdown-digits">00</div>
    </div>
    <div class="countdown-digit-container">
      <h6 class="countdown-digit-title">Hours</h6>
      <div id="countdown-hours" class="countdown-digits">00</div>
    </div>
    <div class="countdown-digit-container">
      <h6 class="countdown-digit-title">Minutes</h6>
      <div id="countdown-minutes" class="countdown-digits">00</div>
    </div>
    <div class="countdown-digit-container">
      <h6 class="countdown-digit-title">Seconds</h6>
      <div id="countdown-seconds" class="countdown-digits">00</div>
    </div>
  </div>
</body>
</html>

<!-- Countdown clock -->
<script type="text/javascript">
(function() {
  var CONFIG = {
    ENABLE_DAYS: true,
    ENABLE_HOURS: true,
    ENABLE_MINUTES: true,
    ENABLE_SECONDS: true,
    // Set the digit element ids here
    DAYS_ID: "countdown-days",
    HOURS_ID: "countdown-hours",
    MINUTES_ID: "countdown-minutes",
    SECONDS_ID: "countdown-seconds",
    // This format is valid in all browsers, and ensures there's no
    // confusion about the month and day
    DEADLINE: Date.parse("01 Jan 2019 00:00 AM")
  };


  // Calculate the time to the deadline with a minimum value of 0
  var now = Date.now();
  var timeToDeadline = Math.max(0, CONFIG.DEADLINE - now);

  /*
    We could compare each number against the related element's html, but
    number-to-number comparison is faster, and by being simpler is more
    reliable. So, we keep track of what each number was during the previous
    iteration.
  */
  var days, hours, minutes, seconds;
  var lastDays, lastHours, lastMinutes, lastSeconds;

  function updateHTMLElements() {
    // Set these to the id of whatever element should contain the digits
    var daysElement = document.getElementById(CONFIG.DAYS_ID);
    var hoursElement = document.getElementById(CONFIG.HOURS_ID);
    var minutesElement = document.getElementById(CONFIG.MINUTES_ID);
    var secondsElement = document.getElementById(CONFIG.SECONDS_ID);

    // Updating the DOM is the most intensive part of this, so we only do it
    // if the digit has changed
    if (CONFIG.ENABLE_DAYS && lastDays !== days) {
      lastDays = days;
      daysElement.innerHTML = (days < 10 ? "0" : "") + days;
    }
    if (CONFIG.ENABLE_HOURS && lastHours !== hours) {
      lastHours = hours;
      hoursElement.innerHTML = (hours < 10 ? "0" : "") + hours;
    }
    if (CONFIG.ENABLE_MINUTES && lastMinutes !== minutes) {
      lastMinutes = minutes;
      minutesElement.innerHTML = (minutes < 10 ? "0" : "") + minutes;
    }
    if (CONFIG.ENABLE_SECONDS && lastSeconds !== seconds) {
      lastSeconds = seconds;
      secondsElement.innerHTML = (seconds < 10 ? "0" : "") + seconds;
    }
  }

  function updateCountdown() {
    now = Date.now();
    timeToDeadline = Math.max(0, CONFIG.DEADLINE - now);

    /*
      For each unit of time, we only want to modulo (%) the number if the
      next larger unit is enabled.

      E.G. 2 Hours : 30 Minutes, not 2 Hours : 120 Minutes
    */
    if (CONFIG.ENABLE_DAYS) {
      days = parseInt(timeToDeadline / 86400000);
    }
    if (CONFIG.ENABLE_HOURS) {
      hours = parseInt(timeToDeadline / 3600000);

      if (CONFIG.ENABLE_DAYS) {
        hours = hours % 24;
      }
    }
    if (CONFIG.ENABLE_MINUTES) {
      minutes = parseInt(timeToDeadline / 60000)
      if (CONFIG.ENABLE_HOURS) {
        minutes = minutes % 60;
      }
    }
    if (CONFIG.ENABLE_SECONDS) {
      seconds = parseInt(timeToDeadline / 1000)
      if (CONFIG.ENABLE_MINUTES) {
        seconds = seconds % 60;
      }
    }

    updateHTMLElements();

    // Stop updating once we reach the deadline
    if (timeToDeadline > 0) {
      window.requestAnimationFrame(updateCountdown);
    }
  }

  window.requestAnimationFrame(updateCountdown);
})();
</script>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Countdown Clock</title>
	<meta charset="utf-8"/>
	<style type="text/css">
	#countdown-container {
	display: -ms-flex;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	text-align: center;
	margin: 0 auto;
	width: 256px;
	}
	.countdown-digit-container {
	width: 25%;
	}
	.countdown-digit-title {
	font: bold 12px 'helvetica', sans-serif;
	}
	.countdown-digits {
	font: 24px 'times', serif;
	}
	</style>
	</head>
	<body>
	<div id="countdown-container">
	<div class="countdown-digit-container">
	<h6 class="countdown-digit-title">Days</h6>
	<div id="countdown-days" class="countdown-digits">00</div>
	</div>
	<div class="countdown-digit-container">
	<h6 class="countdown-digit-title">Hours</h6>
	<div id="countdown-hours" class="countdown-digits">00</div>
	</div>
	<div class="countdown-digit-container">
	<h6 class="countdown-digit-title">Minutes</h6>
	<div id="countdown-minutes" class="countdown-digits">00</div>
	</div>
	<div class="countdown-digit-container">
	<h6 class="countdown-digit-title">Seconds</h6>
	<div id="countdown-seconds" class="countdown-digits">00</div>
	</div>
	</div>
	</body>
	</html>

	<!-- Countdown clock -->
	<script type="text/javascript">
	(function() {
	var CONFIG = {
	ENABLE_DAYS: true,
	ENABLE_HOURS: true,
	ENABLE_MINUTES: true,
	ENABLE_SECONDS: true,
	// Set the digit element ids here
	DAYS_ID: "countdown-days",
	HOURS_ID: "countdown-hours",
	MINUTES_ID: "countdown-minutes",
	SECONDS_ID: "countdown-seconds",
	// This format is valid in all browsers, and ensures there's no
	// confusion about the month and day
	DEADLINE: Date.parse("01 Jan 2019 00:00 AM")
	};


	// Calculate the time to the deadline with a minimum value of 0
	var now = Date.now();
	var timeToDeadline = Math.max(0, CONFIG.DEADLINE - now);

	/*
	We could compare each number against the related element's html, but
	number-to-number comparison is faster, and by being simpler is more
	reliable. So, we keep track of what each number was during the previous
	iteration.
	*/
	var days, hours, minutes, seconds;
	var lastDays, lastHours, lastMinutes, lastSeconds;

	function updateHTMLElements() {
	// Set these to the id of whatever element should contain the digits
	var daysElement = document.getElementById(CONFIG.DAYS_ID);
	var hoursElement = document.getElementById(CONFIG.HOURS_ID);
	var minutesElement = document.getElementById(CONFIG.MINUTES_ID);
	var secondsElement = document.getElementById(CONFIG.SECONDS_ID);

	// Updating the DOM is the most intensive part of this, so we only do it
	// if the digit has changed
	if (CONFIG.ENABLE_DAYS && lastDays !== days) {
	lastDays = days;
	daysElement.innerHTML = (days < 10 ? "0" : "") + days;
	}
	if (CONFIG.ENABLE_HOURS && lastHours !== hours) {
	lastHours = hours;
	hoursElement.innerHTML = (hours < 10 ? "0" : "") + hours;
	}
	if (CONFIG.ENABLE_MINUTES && lastMinutes !== minutes) {
	lastMinutes = minutes;
	minutesElement.innerHTML = (minutes < 10 ? "0" : "") + minutes;
	}
	if (CONFIG.ENABLE_SECONDS && lastSeconds !== seconds) {
	lastSeconds = seconds;
	secondsElement.innerHTML = (seconds < 10 ? "0" : "") + seconds;
	}
	}

	function updateCountdown() {
	now = Date.now();
	timeToDeadline = Math.max(0, CONFIG.DEADLINE - now);

	/*
	For each unit of time, we only want to modulo (%) the number if the
	next larger unit is enabled.

	E.G. 2 Hours : 30 Minutes, not 2 Hours : 120 Minutes
	*/
	if (CONFIG.ENABLE_DAYS) {
	days = parseInt(timeToDeadline / 86400000);
	}
	if (CONFIG.ENABLE_HOURS) {
	hours = parseInt(timeToDeadline / 3600000);

	if (CONFIG.ENABLE_DAYS) {
	hours = hours % 24;
	}
	}
	if (CONFIG.ENABLE_MINUTES) {
	minutes = parseInt(timeToDeadline / 60000)
	if (CONFIG.ENABLE_HOURS) {
	minutes = minutes % 60;
	}
	}
	if (CONFIG.ENABLE_SECONDS) {
	seconds = parseInt(timeToDeadline / 1000)
	if (CONFIG.ENABLE_MINUTES) {
	seconds = seconds % 60;
	}
	}

	updateHTMLElements();

	// Stop updating once we reach the deadline
	if (timeToDeadline > 0) {
	window.requestAnimationFrame(updateCountdown);
	}
	}

	window.requestAnimationFrame(updateCountdown);
	})();
	</script>