Skip to main content
updated with countdown timer
Source Link
Edward
  • 67.2k
  • 4
  • 120
  • 284

Assuming that what you want is to iterate through each exercise, display something static and wait for the timeout to expire before moving on to the next, I might do it like this:

<h1 id="exercisename">Get Ready</h1>
<h2 id="seconds">0</h2>
<p>Click the button to start the exercises.</p>
<button onclick="nextExercise()">Begin</button>  
<script>
var exercises = [
    {
        "desc":       "Pushup/Pullup",
        "countdown":  3
    }, {
        "desc":       "Squat punch",
        "countdown":  4
    }, {
        "desc":       "Jumping jacks",
        "countdown":  6
    }
];
var excount = 0;
var timeleft = 0;
var secondsTimer;
function setSeconds(s)
{
    var sec = document.getElementById('seconds');
    sec.textContent = timeleft;
}
function tick()
{
    setSeconds(timeleft--);
    if (timeleft <= 0){
        clearInterval(secondsTimer);
    }
}
function nextExercise()
{
    var ex = exercises[excount++];
    var name = document.getElementById('exercisename');
    if (typeof ex == 'undefined') {
        name.textContent = "Done";
        excount = 0;
    } else {
        name.textContent = ex.desc+" for "+ex.countdown+" seconds";
        timeleft = ex.countdown;
        setSeconds(timeleft);
        secondsTimer = setInterval(tick, 1000);
        setTimeout(nextExercise,ex.countdown*1000);
    }
}
</script>

Obviously for a real workout, you'd probably want to increase the times a bit. :)

Update:

Based on a comment, I've also added a countdown timer. Note that the countdown is handled as using setInterval while the exercise timers use a separate and independent setTimeout.

Assuming that what you want is to iterate through each exercise, display something static and wait for the timeout to expire before moving on to the next, I might do it like this:

<h1 id="exercisename">Get Ready</h1>
<p>Click the button to start the exercises.</p>
<button onclick="nextExercise()">Begin</button>  
<script>
var exercises = [
    {
        "desc":       "Pushup/Pullup",
        "countdown":  3
    }, {
        "desc":       "Squat punch",
        "countdown":  4
    }, {
        "desc":       "Jumping jacks",
        "countdown":  6
    }
];
var excount = 0;
function nextExercise()
{
    var ex = exercises[excount++];
    var name = document.getElementById('exercisename');
    if (typeof ex == 'undefined') {
        name.textContent = "Done";
        excount = 0;
    } else {
        name.textContent = ex.desc+" for "+ex.countdown+" seconds";
        setTimeout(nextExercise,ex.countdown*1000);
    }
}
</script>

Obviously for a real workout, you'd probably want to increase the times a bit. :)

Assuming that what you want is to iterate through each exercise, display something static and wait for the timeout to expire before moving on to the next, I might do it like this:

<h1 id="exercisename">Get Ready</h1>
<h2 id="seconds">0</h2>
<p>Click the button to start the exercises.</p>
<button onclick="nextExercise()">Begin</button>  
<script>
var exercises = [
    {
        "desc":       "Pushup/Pullup",
        "countdown":  3
    }, {
        "desc":       "Squat punch",
        "countdown":  4
    }, {
        "desc":       "Jumping jacks",
        "countdown":  6
    }
];
var excount = 0;
var timeleft = 0;
var secondsTimer;
function setSeconds(s)
{
    var sec = document.getElementById('seconds');
    sec.textContent = timeleft;
}
function tick()
{
    setSeconds(timeleft--);
    if (timeleft <= 0){
        clearInterval(secondsTimer);
    }
}
function nextExercise()
{
    var ex = exercises[excount++];
    var name = document.getElementById('exercisename');
    if (typeof ex == 'undefined') {
        name.textContent = "Done";
        excount = 0;
    } else {
        name.textContent = ex.desc+" for "+ex.countdown+" seconds";
        timeleft = ex.countdown;
        setSeconds(timeleft);
        secondsTimer = setInterval(tick, 1000);
        setTimeout(nextExercise,ex.countdown*1000);
    }
}
</script>

Obviously for a real workout, you'd probably want to increase the times a bit. :)

Update:

Based on a comment, I've also added a countdown timer. Note that the countdown is handled as using setInterval while the exercise timers use a separate and independent setTimeout.

Source Link
Edward
  • 67.2k
  • 4
  • 120
  • 284

Assuming that what you want is to iterate through each exercise, display something static and wait for the timeout to expire before moving on to the next, I might do it like this:

<h1 id="exercisename">Get Ready</h1>
<p>Click the button to start the exercises.</p>
<button onclick="nextExercise()">Begin</button>  
<script>
var exercises = [
    {
        "desc":       "Pushup/Pullup",
        "countdown":  3
    }, {
        "desc":       "Squat punch",
        "countdown":  4
    }, {
        "desc":       "Jumping jacks",
        "countdown":  6
    }
];
var excount = 0;
function nextExercise()
{
    var ex = exercises[excount++];
    var name = document.getElementById('exercisename');
    if (typeof ex == 'undefined') {
        name.textContent = "Done";
        excount = 0;
    } else {
        name.textContent = ex.desc+" for "+ex.countdown+" seconds";
        setTimeout(nextExercise,ex.countdown*1000);
    }
}
</script>

Obviously for a real workout, you'd probably want to increase the times a bit. :)