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