使用js實現顯示系統當前時間並實現倒計時功能並觸發模態框（遮罩）功能

　　常常在我們的網頁中需要倒計時來觸發一些函數，例如遮罩等，在本項目中，通過使用jquery，bootstrap，實現了顯示系統當前時間，並且實現了倒計時的功能，倒計時實現后將會彈出模態框（遮罩層）。模態框界面友好，使用靈活，以彈出對話框的形式出現。具體見下圖1：

　　項目源文件地址：https://github.com/zhangxy1035/Countdown

　　參考資料：http://v3.bootcss.com/javascript/#modals

　　圖1：

 

 

　　關於倒計時函數如下：

 var time = 10*1000;//計算出毫秒數
    var se;
    se = setInterval('t_time()',1000);
    function t_time() {
        //倒計時
        var mm = parseInt(time/60/1000%60,10);//剩余的分鍾數
        var ss = parseInt(time/1000%60,10);//剩余的秒數
        mm = checkTime(mm);
        ss = checkTime(ss);
        $("#timer").html(mm+'分'+ss+'秒');
        time = time-1000;
        if(mm==0 && ss==0) {
            $("#myEnd").modal("toggle");
            clearInterval(se);
        }
    }

    function checkTime(i) {
        if(i<10) {
            i = "0"+i;
        }
        return i;
    }

　　在上述代碼中，checkTime函數，主要功能是控制顯示，例如距離時間結束為8秒，系統將會顯示為08.

　　html中代碼引用：

 <span class="label badge-success">當前時間為:&nbsp;<span id="current-time"></span></span>

　　模態框（遮罩層）代碼為：

div id="myEnd" class="modal hide">
    <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button">×</button>
        <h3>警告</h3>
    </div>
    <div class="modal-body">
        <p>您的時間已經用完</p>
    </div>
    <div class="modal-footer">
        <a data-dismiss="modal" class="btn btn-success" href="#">確定</a>
    </div>
</div>

　　出現模態框后，可以跳轉到自己所鏈接的網頁。

　　顯示當前系統時間：

   //顯示當前時間
    setInterval(function() {
        var now = (new Date()).toLocaleString();
        $('#current-time').text(now);
    }, 1000);