<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>title</title>
<script type="text/javascript">
// there are 3 levels here. you can add more
// by adding more integers to the array
var levels = ['',
3,
3,
3
],
level = 1, // store the level and increment it when the user finishes one
time = levels[1], // time is set to the first level's time (10)
t;
function cddisplay() {
// displays time in span
document.getElementById('timespan').innerHTML = 'Level: ' + level + '. ' + 'Time Left: ' + time;
};
function countdown() {
// starts countdown
cddisplay();
if (time <= 0) {
alert('Time\'s up for level ' + level);
level += 1;
if (level >= levels.length) {
// execute code if the user has finished all of the levels
alert('You finished all ' + (levels.length - 1) + ' levels!');
phoneui.gotoPage('m1-HOMESCREEN', 'NONE');
location.reload();
} else {
time = levels[level];
}
} else {
time -= 1;
t = setTimeout(countdown, 1000);
}
};
function cdpause() {
// pauses countdown
clearTimeout(t);
};
function cdreset() {
// resets countdown
cdpause();
time = levels[1];
level = 1;
cddisplay();
};
</script>
<style type="text/css">
body {
background-color: #EEEEEE;
margin: 0;
}
</style>
</head>
<body>
<span id="timespan">Level: 1. Time Left: x</span>
<input type="button" value="Start" onclick="countdown()">
<input type="button" value="Stop" onclick="cdpause()">
<input type="button" value="Reset" onclick="cdreset()">
</body>
</html>