怎么实现一个页面有多个倒计时同时进行

后台返回时间,一个页面中有多个表格每个表格中有一行用来显示后台给的时间,比如说后台给一号表格10分钟的倒计时时间,给2号表格15分钟的倒计时时间,那我要怎么做才能使得这两个倒计时都能进行??我自己模拟了一个静态的假的倒计时,但是一直没办法让两个时间都能倒计时。
模拟页面:
clipboard.png
(ps:这里的10分50秒我后面有转化成00:00的格式,这两个数据都是假的,在html里填充进去的)

html代码:

<div style="width:300px;height:200px;background:lightgrey;" class="totalDiv">
        <button style="color:black;background-color:aquamarine;">倒计时</button>
        <div style='color:red;font-size:16px;margin-top:40px;margin-left:20px'>离预约失效的时间:
            <br>
            <b>
                <span class='time' id="0">10分50秒,</span>
            </b>
        </div>
        <div style='color:red;font-size:16px;margin-top:40px;margin-left:20px'>离预约失效的时间:
            <br>
            <b>
                <span class='time' id="1">3分58秒,</span>
            </b>
        </div>
    </div>

js代码:

var remainTime = $("body").find(".time").text();
        var clock = remainTime.split(",");
        var countDownTimes = [];
        clock.pop();
        for (var i = 0; i < clock.length; i++) { //获取总时间
            var second = clock[i].slice(-4, -1); //秒数
            var minu = clock[i].slice(0, 2); //分钟数
            /* 以下的if都是为了将X分x秒转换成00:00格式 */
            if (second.substr(0, 1) === '分') {
                second = second.slice(1, 3);
            }
            if (second.substr(1, 1) == '分') {
                second = second.slice(2, 3);
            }
            if (second < 0) {
                second = 60 + parseInt(second);
                second = second.toString();
                minu = parseInt(minu);
                minu = minu - 1;
                minu = minu.toString();
            }
            if (minu.substr(minu.length - 1, 1) == '分') {
                minu = minu.slice(0, 1);
            }
            if (minu.length == 1 || minu.length == 0) {
                minu = "0" + minu;
            }
            if (second.length == 1) {
                second = "0" + second;
            }
            time = minu + ":" + second;
            countDownTimes[i] = parseInt(minu * 60 + second * 1); //开始:转换成总秒数    
            /* cutTime(countDownTime); */
        }
       
        for (var j = 0; j < countDownTimes.length; j++) {
            var countDownTime = countDownTimes[j];
            cutTime(countDownTime);
        }

        function cutTime(countDownTime) {
            var timer = setInterval(function () {
                if (countDownTime >= 0) {
                    showTime(countDownTime);
                    countDownTime--;
                } else {
                    clearInterval(timer);
                    alert("计时结束,给出提示");
                }
            }, 1000);
        }

        function showTime(countDownTime) {
            var minute = Math.floor(countDownTime / 60);
            var seconds = countDownTime - 60 * minute;
            minute = minute.toString();
            seconds = seconds.toString();
            if (minute.length == 1) {
                minute = "0" + minute;
            }
            if (seconds.length == 1) {
                seconds = "0" + seconds;
            }
            time = minute + ":" + seconds;
            /* 显示时间 */
            console.log(time);
            $("span#2").text(time);
        }
        
     

非常不理解的是我如果把time这个东西填充进上面随便一个b标签里,都只能显示一个时间就是后面这个div的时间,但是如果我是在控制台里打印time,就会显示两个时间,因为我有两个div时间。这是为什么呢?如图

clipboard.png

回复
阅读 5.8k
3 个回答

j的那个循环循环了两次,showTime()执行了两次,console了两次,text()执行了两次,后面那次覆盖掉了前面的那次,所以你只能看到后面的那个倒计时;

错误的代码贴下?运行了你的代码,倒计时两个都不走

$("span#2").text(time);

你只给一个元素赋值,第二个覆盖了第一个

var remainTime = $("body").find(".time").text();
var clock = remainTime.split(",");
var countDownTimes = [];
clock.pop();
for (var i = 0; i < clock.length; i++) { //获取总时间
    var second = clock[i].slice(-4, -1); //秒数
    var minu = clock[i].slice(0, 2); //分钟数
    /* 以下的if都是为了将X分x秒转换成00:00格式 */
    if (second.substr(0, 1) === '分') {
        second = second.slice(1, 3);
    }
    if (second.substr(1, 1) == '分') {
        second = second.slice(2, 3);
    }
    if (second < 0) {
        second = 60 + parseInt(second);
        second = second.toString();
        minu = parseInt(minu);
        minu = minu - 1;
        minu = minu.toString();
    }
    if (minu.substr(minu.length - 1, 1) == '分') {
        minu = minu.slice(0, 1);
    }
    if (minu.length == 1 || minu.length == 0) {
        minu = "0" + minu;
    }
    if (second.length == 1) {
        second = "0" + second;
    }
    time = minu + ":" + second;
    countDownTimes[i] = parseInt(minu * 60 + second * 1); //开始:转换成总秒数    
    /* cutTime(countDownTime); */
}
   
for (var j = 0; j < countDownTimes.length; j++) {
    var countDownTime = countDownTimes[j];
    cutTime(countDownTime,j);
}

function cutTime(countDownTime,j) {
    var timer = setInterval(function () {
        if (countDownTime >= 0) {
            showTime(countDownTime,j);
            countDownTime--;
        } else {
            clearInterval(timer);
            alert("计时结束,给出提示");
        }
    }, 1000);
}

function showTime(countDownTime,j) {
    var minute = Math.floor(countDownTime / 60);
    var seconds = countDownTime - 60 * minute;
    minute = minute.toString();
    seconds = seconds.toString();
    if (minute.length == 1) {
        minute = "0" + minute;
    }
    if (seconds.length == 1) {
        seconds = "0" + seconds;
    }
    time = minute + ":" + seconds;
    /* 显示时间 */
    console.log(time,j);
    $("span#"+j).text(time);
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏