英文:
Javascript and jQuery consecutive countdown
问题
我找到了一个倒计时脚本
我如何使用像这样的 JSON 对象来更改小时、分钟、秒和标题？
[
{
"id": "1",
"title": "倒计时 1",
"hour": "0",
"minute": "0",
"second": "10"
},
{
"id": "2",
"title": "倒计时 2",
"hour": "0",
"minute": "0",
"second": "10"
},
{
"id": "3",
"title": "倒计时 3",
"hour": "0",
"minute": "0",
"second": "10"
}
]
然后逐个连续显示它们，全部倒计时结束后进行重定向？
我已经在使用 foreach 循环，但它破坏了倒计时。这个脚本与使用日期的其他倒计时不同。
英文:
I found a countdown script
How do I change hours, minutes, second and title with JSON object like this?
[
{
"id": "1",
"title": "countdown 1",
"hour": "0",
"minute": "0",
"second": "10"
},
{
"id": "2",
"title": "countdown 2",
"hour": "0",
"minute": "0",
"second": "10"
},
{
"id": "3",
"title": "countdown 3",
"hour": "0",
"minute": "0",
"second": "10"
}
]
and show it one by one consecutively then redirect when all countdown done?
I am already using foreach loop, but it broke the countdown. This script is different than other countdown that use date.
答案1
得分: 1
你不想使用for循环，而是想要一个可以使用if语句来继续或停止的递归函数。
对于我的回答，我有curTimer变量，它代表循环中当前定时器的索引。
maxSeconds代表定时器应持续的时间，基于定时器中的信息。
thisTimer代表数组中选定定时器的数据。
如果当前定时器的索引小于数组长度减1（数组从0开始），则继续，否则输出done。
英文:
You don't want to use a for loop, instead you want a recursive function that can use if statements to continue or not.
For my answer, I have variables for the curTimer which represents the current timer's index in the loop.
maxSeconds represents how long the timer should go for based on the information in the timer.
thisTimer represents the data in the selected timer in the array.
If the current timer's index is less than the array.length -1 (arrays start at 0), then continue, if not then output done.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const output = document.querySelector(".output");
let interval;
let curTimer = 0;
let maxSeconds = 0;
let thisTimer;
const timers = [{
"id": "1",
"title": "countdown 1",
"hour": "0",
"minute": "0",
"second": "4"
},
{
"id": "2",
"title": "countdown 2",
"hour": "0",
"minute": "0",
"second": "4"
},
{
"id": "3",
"title": "countdown 3",
"hour": "0",
"minute": "0",
"second": "4"
}
]
const displayTime = () => {
output.innerHTML = maxSeconds + " timer " + thisTimer.title ;
};
const timer = (timers, inc) => {
thisTimer = timers[inc]
maxSeconds = (parseInt(thisTimer.hour) * 3600) + (parseInt(thisTimer.minute) * 60) + parseInt(thisTimer.second);
interval = setInterval(() => {
displayTime();
maxSeconds--
if (maxSeconds < 0) {
clearInterval(interval);
if (curTimer < timers.length-1) {
curTimer++;
timer(timers, curTimer);
}
else{
output.innerHTML = "DONE";
}
}
}, 1000);
};
timer(timers, curTimer);
<!-- language: lang-html -->
<div class="output"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论