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.