JS实现番茄钟倒计时

文字解释都在注释里了,JS很有趣。
function start() {
var planId = "";
    var planName = document.getElementById(id).getAttribute("value");  //获取选中单选框的子ID的父ID
    plan = "&planId=" + id + "&planName=" + planName;
    $.ajax({
        type: "POST",
        url: "/Countdown/RunTime",
        data: plan,
        success: function (data) {       //data接收返回来的值
            $.ajax({
                type: "POST",
                url: "/Countdown/insertRecord",
                data: plan,              //这里的data是传到B层的id和名字
            });
            timer = setInterval("CountDown()", 1000);   //setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。调用CountDown方法,1000毫秒进行一次
            maxtime = data * 60;      //定义maxtime为传回来的值X60,单位为秒
        }
    });
}
function CountDown() {
    if (maxtime >= 0) {                         //如果刚刚定义的maxtime大于0,进行下面的操作
        minutes = Math.floor(maxtime / 60);     //Math.floor是向下取整
        seconds = Math.floor(maxtime % 60);
        msg = minutes + "分" + seconds + "秒";
        x.innerHTML = msg;
        --maxtime;                               //maxtime递减
    } else {
        clearInterval(timer);                    //clearInterval()是清空倒计时
        $('#myModal1').modal({ show: true });    //显示模态框
    }
}

猜你喜欢

转载自blog.csdn.net/zhijianhuiyi/article/details/79026163