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

(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);
}
}, 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);
}

``````

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);
}
}, 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);
}``````

###### 你尚未登录，登录后可以
• 和开发者交流问题的细节
• 关注并接收问题和回答的更新提醒
• 参与内容的编辑和改进，让解决方法与时俱进