vaiorabbit/countdown_timer.html

## countdown_timer.html
<!--
	Countdown timer using Countdown.js (http://countdownjs.org).
	- Put https://bitbucket.org/mckamey/countdown.js/raw/tip/countdown.js here.
	- Open this file in your browser.
-->
<html>
  <head>
	<meta charset="UTF-8">
	<title>Countdown Timer</title>
  </head>
  <body>
	<form>
	  <fieldset id="countdown-start">
		<span>
		  <input id="hours" type="number" min="0" max="23" step="1" value="0" size="2" />
		  <label for="hours">h</label>
		  <input id="minutes" type="number" min="0" max="59" step="1" value="3" size="2" />
		  <label for="minutes">m</label>
		  <input id="seconds" type="number" min="0" max="59" step="1" value="0" size="2" />
		  <label for="seconds">s</label>
		</span>
	  <input type="button" id="start" value="Start timer" onClick="startCountdown()"/>
	  <input type="button" id="end" value="End timer" onClick="endCountdown()"/>
	  <label for="note">Note:</label><input type="text" id="note" value="The countdown ended."/>
	  </fieldset>
	</form>

	<h1 id="clock-placeholder"></h1>

	<script src="countdown.js" type="text/javascript"></script>
	<script>
	  var clockRunning = false;
	  var clockPlaceholder = document.getElementById("clock-placeholder");
	  var targetDate;
	  var clock;

	  function updateClock() {
	    var cd = countdown(targetDate, null, countdown.DAYS|countdown.HOURS|countdown.MINUTES|countdown.SECONDS, 4);
	    clockPlaceholder.innerHTML = cd.toString();
	    if (targetDate.getTime() < (new Date()).getTime()) {
	      alert(document.getElementById("note").value);
	      endCountdown();
	    }
	  }

	  function startCountdown() {
	    if ( clockRunning == false ) {
	      var h = parseInt(document.getElementById("hours").value) || 0;
	      var m = parseInt(document.getElementById("minutes").value) || 0;
	      var s = parseInt(document.getElementById("seconds").value) || 0;
	      if (h == 0 && m == 0 && s == 0 ) {
	        return;
	      }
	      // setup target Date object
	      var now = new Date(); // console.debug(now.toString());

	      targetDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(),
	                            now.getHours() + h, now.getMinutes() + m, now.getSeconds() + s, 0);

	      // start clock
	      clock = setInterval(updateClock, 1000);
	      clockRunning = true;
	    }
	  }

	  function endCountdown() {
	    clockPlaceholder.innerHTML = ""
	    clearInterval( clock );
	    clockRunning = false;
	  }
	</script>
  </body>
</html>
	<!--
	Countdown timer using Countdown.js (http://countdownjs.org).
	- Put https://bitbucket.org/mckamey/countdown.js/raw/tip/countdown.js here.
	- Open this file in your browser.
	-->
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Countdown Timer</title>
	</head>
	<body>
	<form>
	<fieldset id="countdown-start">
	<span>
	<input id="hours" type="number" min="0" max="23" step="1" value="0" size="2" />
	<label for="hours">h</label>
	<input id="minutes" type="number" min="0" max="59" step="1" value="3" size="2" />
	<label for="minutes">m</label>
	<input id="seconds" type="number" min="0" max="59" step="1" value="0" size="2" />
	<label for="seconds">s</label>
	</span>
	<input type="button" id="start" value="Start timer" onClick="startCountdown()"/>
	<input type="button" id="end" value="End timer" onClick="endCountdown()"/>
	<label for="note">Note:</label><input type="text" id="note" value="The countdown ended."/>
	</fieldset>
	</form>

	<h1 id="clock-placeholder"></h1>

	<script src="countdown.js" type="text/javascript"></script>
	<script>
	var clockRunning = false;
	var clockPlaceholder = document.getElementById("clock-placeholder");
	var targetDate;
	var clock;

	function updateClock() {
	var cd = countdown(targetDate, null, countdown.DAYS\|countdown.HOURS\|countdown.MINUTES\|countdown.SECONDS, 4);
	clockPlaceholder.innerHTML = cd.toString();
	if (targetDate.getTime() < (new Date()).getTime()) {
	alert(document.getElementById("note").value);
	endCountdown();
	}
	}

	function startCountdown() {
	if ( clockRunning == false ) {
	var h = parseInt(document.getElementById("hours").value) \|\| 0;
	var m = parseInt(document.getElementById("minutes").value) \|\| 0;
	var s = parseInt(document.getElementById("seconds").value) \|\| 0;
	if (h == 0 && m == 0 && s == 0 ) {
	return;
	}
	// setup target Date object
	var now = new Date(); // console.debug(now.toString());

	targetDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(),
	now.getHours() + h, now.getMinutes() + m, now.getSeconds() + s, 0);

	// start clock
	clock = setInterval(updateClock, 1000);
	clockRunning = true;
	}
	}

	function endCountdown() {
	clockPlaceholder.innerHTML = ""
	clearInterval( clock );
	clockRunning = false;
	}
	</script>
	</body>
	</html>