js使用setTimeout實現(xiàn)定時炸彈的方法

字號： 小 中 大


    今天看 css探索之旅 的博客文章，有個用setTimeout寫定時炸彈的效果，自己也就照貓畫貓來寫一個。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "">
    <html xmlns="">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>無標題文檔</title>
    <style>
    div{
    width:200px;
    height:50px;
    margin:30px auto 0;
    background:#ccc;
    text-align:center;
    font:14px/50px arial;
    cursor:pointer
    }
    </style>
    <script type="text/javascript" src="js/jquery_1.4.2.js"></script>
    </head>
    <body>
    <div id="zha">開始定時</div>
    <div id="chai">拆除炸彈</div>
    <script>
    $("#zha").bind("click",function(){
    zha();
    })
    $("#chai").bind("click",function(){
    chai();
    })
    var time = 5;
    var timer = 0;
    function zha(){
    var text = "倒計時";
    text += time--;
    $("#zha").text(text);
    if(time >=0){
    timer = setTimeout(zha,1000);
    $("#zha").css("color","black");
    $("#chai").show();
    }else{
    $("#zha").text("爆炸");
    $("#zha").css("color","red");
    time = 5;
    $("#chai").fadeOut();
    }
    }
    function chai(){
    clearTimeout(timer);
    $("#zha").text("炸彈拆除成功,點擊繼續(xù)");
    }
    </script>
    </body>
    </html>