arthurk/countdown.html

## countdown.html
<!-- Simple Countdown in JS + Total Count -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title></title>
    <style type="text/css" media="screen">
        body {
            font-family: Helvetica;
            font-size: 16px;
            margin: 0 auto;
            margin-top: 100px;
            width: 520px;
        }

        h1, h2 { margin: 0; padding: 0}

        #curr_val, #total_val, #sep{ font-size: 196px; text-align: center}
        #total_val { color: #999 }
        #curr_val {
            display:block;
            float:left;
            text-align:right;
            width: 200px;
        }

        .pause {
            color: #f3c435;
        }

        .on {
            color: #acd300;
        }

        #sep { color: #dedede; padding: 0 10px 0 30px}
    </style>
    <script type="text/javascript" charset="utf-8">
        var counts = 12;
        var total = 0;

        function normalcount()
        {
            document.getElementById('start').style.visibility='hidden';
            var start = new Date();
            start = Date.parse(start)/1000;
            countdown(start);
        }

        function countdown(start) {
            var now = new Date();
            now = Date.parse(now)/1000;
            var x = parseInt(counts-(now-start), 10);

            document.getElementById('curr_val').innerHTML = x;

            if(x > 0) {
                if (x > 6) { document.getElementById("curr_val").className = "pause"; }
                else { document.getElementById("curr_val").className = "on"; }

                timerID=setTimeout("countdown("+start+")", 100);
            }
            else {
                document.getElementById('total_val').innerHTML = total+=1;
                setTimeout("normalcount()", 1000);
            }
        }

    </script>
</head>
<body>
    <h1><span id="curr_val" class="pause">12</span><span id="sep">/</span><span id="total_val">10</span></h1>
    <p style="text-align:center"><input type="button" id="start" onclick="normalcount()" value="Start"/><p>

</body>
</html>
	<!-- Simple Countdown in JS + Total Count -->

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
	"http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title></title>
	<style type="text/css" media="screen">
	body {
	font-family: Helvetica;
	font-size: 16px;
	margin: 0 auto;
	margin-top: 100px;
	width: 520px;
	}

	h1, h2 { margin: 0; padding: 0}

	#curr_val, #total_val, #sep{ font-size: 196px; text-align: center}
	#total_val { color: #999 }
	#curr_val {
	display:block;
	float:left;
	text-align:right;
	width: 200px;
	}

	.pause {
	color: #f3c435;
	}

	.on {
	color: #acd300;
	}

	#sep { color: #dedede; padding: 0 10px 0 30px}
	</style>
	<script type="text/javascript" charset="utf-8">
	var counts = 12;
	var total = 0;

	function normalcount()
	{
	document.getElementById('start').style.visibility='hidden';
	var start = new Date();
	start = Date.parse(start)/1000;
	countdown(start);
	}

	function countdown(start) {
	var now = new Date();
	now = Date.parse(now)/1000;
	var x = parseInt(counts-(now-start), 10);

	document.getElementById('curr_val').innerHTML = x;

	if(x > 0) {
	if (x > 6) { document.getElementById("curr_val").className = "pause"; }
	else { document.getElementById("curr_val").className = "on"; }

	timerID=setTimeout("countdown("+start+")", 100);
	}
	else {
	document.getElementById('total_val').innerHTML = total+=1;
	setTimeout("normalcount()", 1000);
	}
	}

	</script>
	</head>
	<body>
	<h1><span id="curr_val" class="pause">12</span><span id="sep">/</span><span id="total_val">10</span></h1>
	<p style="text-align:center"><input type="button" id="start" onclick="normalcount()" value="Start"/><p>

	</body>
	</html>