jQuery 实现倒计时

来源：互联网发布：南研所网络产品线编辑：程序博客网时间：2024/06/06 02:27

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8"/>  </head>    <!-- 引用Bootstrap模板 -->    <title>分秒毫秒</title><link rel="stylesheet" href="../../bootstrap-3.3.5-dist/css/bootstrap.min.css">    <link rel="stylesheet" href="../../bootstrap-3.3.5-dist/css/bootstrap-theme.min.css"><link rel="stylesheet" href="time.css">  <body>     <div class="count_down alert alert-success">  </div> <div class="count_down alert alert-info">  </div> <button class="btn btn-warning" onclick="myclick()">开始计时</button>  </body>  </html><script src="../jquery-3.1.0.min.js"></script><script src="time.js"></script><script><!-- 引用倒计时插件 --> function myclick(){   $(".btn-warning").attr("disabled","true");   <!-- minute 分钟 second 秒  msec 毫秒 -->   $(".count_down").plug_in_time({     minute : 1, second : 0, msec : 0   }); } </script>

/*time.js*/

/** * Created by Hack on 2016/11/8. *//* 获取元素 */var minute;  /*分*/var second;  /*秒*/var msec;    /*毫秒*/var time_length;//创建插件timejQuery.fn.extend({    plug_in_time : function(arr){        $(this).html(load_time(arr));        minute = $(".minute");        second = $(".second");        msec = $(".msec");        time_length = minute.length;        time();    }})/*加载倒计时界面*/function load_time(arr){    arr['minute']==0?arr['minute']="00":arr['minute']=arr['minute'];arr['second']==0?arr['second']="00":arr['second']=arr['second'];arr['msec']==0?arr['msec']="00":arr['msec']=arr['msec'];var time_str = "<span class='minute'>"+arr['minute']+"</span>:<span class='second'>"+arr['second']+"</span>:<span class='msec'>"+arr['msec']+"</span>";return time_str;}/*倒计时函数*/function time() {    /* 用循环遍历数据 */    for(var i=0;i<time_length;i++) {        /* 判断当前的数据值 结束循环*/        if (minute.eq(i).text() == "00" && second.eq(i).text() == "00" && msec.eq(i).text() == "00") {            clearTimeout(mytime);        } else {            /* 判断分钟的时间和秒钟*/            if (minute.eq(i).text() != "00" && second.eq(i).text() == "00") {                var num_m = minute.eq(i).text() - 1;                if (parseInt(minute.eq(i).text()) < 11)                    minute.eq(i).text("0" + num_m);                else                    minute.eq(i).text(num_m);                    second.eq(i).text("60");            } else {                /* 判断毫秒的时间 如果毫秒等于00 分钟减 */                if (msec.eq(i).text() == "00") {                    var num_s = second.eq(i).text() - 1;                    if (parseInt(second.eq(i).text()) < 11)                        second.eq(i).text("0" + num_s);                    else                        second.eq(i).text(num_s);                    msec.eq(i).text("99");                } else {                    var num_c = msec.eq(i).text() - 1;                    if (parseInt(msec.eq(i).text()) < 11)                        msec.eq(i).text("0" + num_c);                    else                        msec.eq(i).text(num_c);                }            }        }    }    var mytime = setTimeout(time,10);}

/*css*/

body{background-color : black;text-align : center;}.count_down{font-size : 30px;}.minute,.second,.msec{margin : 5px;}

0 0