lxneng · January 15, 2011 11:47
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 	"http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>倒计时</title>
 <script type="text/javascript">
 // Default settings: 5 minutes, warning at 1 minute
 var count = 5 * 60;
 var warning = 60;
 function $(id){ return document.getElementById(id)}
 window.onload = function() {
    // Can optionally set count and warning in the url
    // e.g. http://lxneng.com/timer/#30,15 = 30 seconds, warning at 15
    //      http://lxneng.com/timer/#300 = 5 minutes, no warning
    var match = /(\d+),?(\d+)?/.exec(location.hash);
    if (match && match[1]) {
        count = parseInt(match[1], 10);
    }
    if (match && match[2]) {
        warning = parseInt(match[2], 10);
    }
    if (match && !match[2]) {
        warning = -1; // Disable warning
    }
    $('countdown').onclick = function() {
        this.onclick = null;
        countdown();
    }
    $('countdown').style.cursor = 'pointer';
 }

 function countdown() {
 	var obj = $("countdown");
    obj.replaceChild(
            document.createTextNode(count.toMinutesAndSeconds()),
            obj.firstChild
        );
    document.title = count.toMinutesAndSeconds();
    if (count > 0) {
        $('countdown').style.cursor = ''; 
        count--;
        if (count < warning) {
            document.body.className = 'warning';
        }
        window.setTimeout(countdown, 1000);
    } else {
        document.body.className = 'deadline';
        obj.onclick = function() {
            location.reload();
        };
        obj.style.cursor = 'pointer';
    }
 }
 Number.prototype.toMinutesAndSeconds = function() {
    // convert numeric seconds input to minutes and seconds string output
    var nn, curTime = new Date(this * 1000);
    return nn = curTime.getMinutes() + ":" + (
        ((nn = curTime.getSeconds()) < 10) ? "0" + nn : nn
    );
 }
 </script>
 <style type="text/css">
 body {
    text-align: center;
    font-family: verdana;
    font-weight: bold;
    font-size: 20em;
    color: white;
    background-color: black;
 }
 body.warning {
    background-color: pink;
    color: black;
 }
 body.deadline {
    text-decoration: blink;
    background-color: red;
    color: white;
 }
 </style>
 </head>
 <body>
 <body class="start">

 <span id="countdown">开始...</span>

 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<title>倒计时</title>
	<script type="text/javascript">
	// Default settings: 5 minutes, warning at 1 minute
	var count = 5 * 60;
	var warning = 60;
	function $(id){ return document.getElementById(id)}
	window.onload = function() {
	// Can optionally set count and warning in the url
	// e.g. http://lxneng.com/timer/#30,15 = 30 seconds, warning at 15
	// http://lxneng.com/timer/#300 = 5 minutes, no warning
	var match = /(\d+),?(\d+)?/.exec(location.hash);
	if (match && match[1]) {
	count = parseInt(match[1], 10);
	}
	if (match && match[2]) {
	warning = parseInt(match[2], 10);
	}
	if (match && !match[2]) {
	warning = -1; // Disable warning
	}
	$('countdown').onclick = function() {
	this.onclick = null;
	countdown();
	}
	$('countdown').style.cursor = 'pointer';
	}

	function countdown() {
	var obj = $("countdown");
	obj.replaceChild(
	document.createTextNode(count.toMinutesAndSeconds()),
	obj.firstChild
	);
	document.title = count.toMinutesAndSeconds();
	if (count > 0) {
	$('countdown').style.cursor = '';
	count--;
	if (count < warning) {
	document.body.className = 'warning';
	}
	window.setTimeout(countdown, 1000);
	} else {
	document.body.className = 'deadline';
	obj.onclick = function() {
	location.reload();
	};
	obj.style.cursor = 'pointer';
	}
	}
	Number.prototype.toMinutesAndSeconds = function() {
	// convert numeric seconds input to minutes and seconds string output
	var nn, curTime = new Date(this * 1000);
	return nn = curTime.getMinutes() + ":" + (
	((nn = curTime.getSeconds()) < 10) ? "0" + nn : nn
	);
	}
	</script>
	<style type="text/css">
	body {
	text-align: center;
	font-family: verdana;
	font-weight: bold;
	font-size: 20em;
	color: white;
	background-color: black;
	}
	body.warning {
	background-color: pink;
	color: black;
	}
	body.deadline {
	text-decoration: blink;
	background-color: red;
	color: white;
	}
	</style>
	</head>
	<body>
	<body class="start">

	<span id="countdown">开始...</span>

	</body>
	</html>