hamg26/countdown.html

## countdown.html
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">
      #clockdiv{
        width: 100%;
      	font-family: sans-serif;
      	display: inline-block;
      	font-weight: 100;
      	text-align: center;
      	font-size: 30px;
      }

      #clockdiv h1{
        color: #396;
        font-weight: 100;
        font-size: 40px;
      }

      #clockdiv > div{
        width: 20%;
        margin-top: 5px;
      	padding: 10px;
      	border-radius: 3px;
        border: 1px solid black;
      	display: inline-block;
      }

      #clockdiv div > span{
      	border-radius: 3px;
      	display: inline-block;
      }

      #clockdiv .lbl{
        color: gray;
      	font-size: 12px;
      }
    </style>

    <title>Countdown Timer by hamg26</title>
  </head>

  <body>
    <div id="clockdiv">
    <div>
      <span class="days"></span>
      <div class="lbl">Days</div>
    </div>
    <div>
      <span class="hours"></span>
      <div class="lbl">Hours</div>
    </div>
    <div>
      <span class="minutes"></span>
      <div class="lbl">Minutes</div>
    </div>
    <div>
      <span class="seconds"></span>
      <div class="lbl">Seconds</div>
    </div>
  </div>

  <script type="text/javascript">
    window.onload=function(){
      function getRemainingTime(endtime) {
        var t = Date.parse(endtime) - Date.parse(new Date());
        var seconds = Math.floor((t / 1000) % 60);
        var minutes = Math.floor((t / 1000 / 60) % 60);
        var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
        var days = Math.floor(t / (1000 * 60 * 60 * 24));
        return {
          'total': t,
          'days': days,
          'hours': hours,
          'minutes': minutes,
          'seconds': seconds
        };
      }

      function initializeClock(id, endtime) {
        var clock = document.getElementById(id);
        var daysSpan = clock.querySelector('.days');
        var hoursSpan = clock.querySelector('.hours');
        var minutesSpan = clock.querySelector('.minutes');
        var secondsSpan = clock.querySelector('.seconds');

        function updateClock() {
          var t = getRemainingTime(endtime);

          daysSpan.innerHTML = t.days;
          hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
          minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
          secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

          if (t.total <= 0) {
            clearInterval(timeinterval);
          }
        }

        updateClock();
        var timeinterval = setInterval(updateClock, 1000);
      }

      var futureDate = new Date(Date.parse(new Date()) + 100 * 24 * 60 * 60 * 1000);
      initializeClock('clockdiv', futureDate);
    }
  </script>

  </body>
</html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style type="text/css">
	#clockdiv{
	width: 100%;
	font-family: sans-serif;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
	}

	#clockdiv h1{
	color: #396;
	font-weight: 100;
	font-size: 40px;
	}

	#clockdiv > div{
	width: 20%;
	margin-top: 5px;
	padding: 10px;
	border-radius: 3px;
	border: 1px solid black;
	display: inline-block;
	}

	#clockdiv div > span{
	border-radius: 3px;
	display: inline-block;
	}

	#clockdiv .lbl{
	color: gray;
	font-size: 12px;
	}
	</style>

	<title>Countdown Timer by hamg26</title>
	</head>

	<body>
	<div id="clockdiv">
	<div>
	<span class="days"></span>
	<div class="lbl">Days</div>
	</div>
	<div>
	<span class="hours"></span>
	<div class="lbl">Hours</div>
	</div>
	<div>
	<span class="minutes"></span>
	<div class="lbl">Minutes</div>
	</div>
	<div>
	<span class="seconds"></span>
	<div class="lbl">Seconds</div>
	</div>
	</div>

	<script type="text/javascript">
	window.onload=function(){
	function getRemainingTime(endtime) {
	var t = Date.parse(endtime) - Date.parse(new Date());
	var seconds = Math.floor((t / 1000) % 60);
	var minutes = Math.floor((t / 1000 / 60) % 60);
	var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
	var days = Math.floor(t / (1000 * 60 * 60 * 24));
	return {
	'total': t,
	'days': days,
	'hours': hours,
	'minutes': minutes,
	'seconds': seconds
	};
	}

	function initializeClock(id, endtime) {
	var clock = document.getElementById(id);
	var daysSpan = clock.querySelector('.days');
	var hoursSpan = clock.querySelector('.hours');
	var minutesSpan = clock.querySelector('.minutes');
	var secondsSpan = clock.querySelector('.seconds');

	function updateClock() {
	var t = getRemainingTime(endtime);

	daysSpan.innerHTML = t.days;
	hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
	minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
	secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

	if (t.total <= 0) {
	clearInterval(timeinterval);
	}
	}

	updateClock();
	var timeinterval = setInterval(updateClock, 1000);
	}

	var futureDate = new Date(Date.parse(new Date()) + 100 * 24 * 60 * 60 * 1000);
	initializeClock('clockdiv', futureDate);
	}
	</script>

	</body>
	</html>