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">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">

<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 class="grid_12">
    <div id="countdown_text"></div>
<script language="Javascript">

  var countdown;
  var countdown_number;

  function countdown_init() {
      countdown_number = 11;

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

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

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

  function countdown_clear() {