使用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);