Skip to main content

A countdown where the numbers count down from 10 to 0 updating every second. This is done by decrementing the counter number and then calling setTimeout again at the end of the timeout function call.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://jonlabelle.com/css/base/960-reset.css">
<link rel="stylesheet" type="text/css" href="http://jonlabelle.com/css/base/960-text.css">
<link rel="stylesheet" type="text/css" href="http://jonlabelle.com/css/base/960.css">
<style type="text/css">
</style>
</head>
<body>

<div class="container_12">
  <div class="grid_12">
    <input type="button" value="start countdown" onclick="countdown_init()" />
    <input type="button" value="stop countdown"  onclick="countdown_clear()" />
  </div>
  <div class="grid_12">
    <div id="countdown_text"></div>
  </div>
</div>
<script language="Javascript">

  var countdown;
  var countdown_number;

  function countdown_init() {
      countdown_number = 11;
      countdown_trigger();
  }

  function countdown_trigger() {
      if (countdown_number > 0) {
          countdown_number--;

          document.getElementById('countdown_text').innerHTML = countdown_number;

          if(countdown_number > 0) {
              countdown = setTimeout('countdown_trigger()', 1000);
          }
      }
  }

  function countdown_clear() {
      clearTimeout(countdown);
  }
</script>

</body>
</html>