倒计时时钟

实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
    *{margin: 0px;padding: 0px;}
    body{font-size: 16px;font-weight: bold;color: #fff;padding: 100px;}
    #box{width: 300px;background: #1a1a1a;padding: 20px;text-align: center;}
    span{display: inline-block;width: 30px;border: 2px solid #ccc;padding: 0 10px; margin: 0 10px;background-color: #fff;color: #000;}
    input{width: 283px;height: 50px;cursor: pointer;margin-top: 20px;background: url(btn-1.png) no-repeat;border: none;outline: none;}
    input.cancel{background-position: 0 -50px;}
</style>
<script>
    window.onload=function(){
        var oBtn = document.getElementsByTagName('input')[0];
        var timer = null;

        oBtn.onclick=function(){
            this.className==''?(timer = setInterval(updateTime,1000),updateTime()) : (clearInterval(timer));
            this.className=this.className==''?'cancel':'';
        };

        function format(a){
            return a.toString().replace(/^(d)$/,'0$1');
        };

        function updateTime(){
            var aSpan = document.getElementsByTagName('span');
            var oRemain = aSpan[0].innerHTML.replace(/^0/,'')*60 + parseInt(aSpan[1].innerHTML.replace(/^0/,''));

            if(oRemain <= 0){
                clearInterval(timer);
                return;
            }
            oRemain--;
            aSpan[0].innerHTML = format(parseInt(oRemain/60));
            oRemain %= 60;
            aSpan[1].innerHTML = format(parseInt(oRemain));
        };

    }
</script>
</head>
<body>
    <div id="box">
        <span>01</span>分钟<span>40</span>秒
        <input type="button"/>
    </div>
</body>
</html>
效果图如下所示：
素材图片：
高否？富否？帅否？否？滚去学习！