Note the spans have unique id values – we can use these to select and modify the elements with jQuery.
JavaScript has a built-in function setInterval() for executing and repeating an action after a set period of time. It returns an object which can later be used to stop the execution with clearInterval().
The first argument can be an inline declaration or a named function. The second argument is the time interval, specified in milliseconds. We can easily attach these two functions to the click event of a button.
To get and set the text of a markup element you can either use its textContent property, or jQuery’s text() function.
Keep in mind that that you should only have one setInterval() function active when the the timer is working, multiple presses of the [Start] button should not attach more setInterval() functions as that would break the correct operation of the timer.
The HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!--<script src="src/jquery-3.2.1.min.js"></script>-->
<style>
#timer {
font-size: 5em;
}
</style>
</head>
<body>
<div id="timer">
<span id="hours" class="timer">00</span>:
<span id="minutes" class="timer">00</span>:
<span id="seconds" class="timer">00</span>
<button id="start-timer">Start</button>
<button id="stop-timer">Stop</button>
</div>
<script src="timer.js"></script>
<script>
window.onload = function () {
timer();
}
</script>
</body>
</html>
JavaScript code with jQuery:
function timer() {
let hr = $('#hours');
let min = $('#minutes');
let sec = $('#seconds');
let counter = 0;
$('#start-timer').on('click', start);
$('#stop-timer').on('click', function () {
clearInterval(counter);
$('#start-timer').on('click', start);
});
function start() {
counter = setInterval(step, 1000);
$('#start-timer').off('click');
}
function step() {
sec.val(+sec.val() + 1);
if (sec.val() > 59) {
sec.val('00');
min.val(+min.val() + 1);
min.text(formatTime(min.val()));
}
if (min.val() > 59) {
min.val('00');
hr.val(+hr.val() + 1);
min.text(formatTime(min.val()));
hr.text(formatTime(hr.val()));
}
sec.text(formatTime(sec.val()));
}
function formatTime(value) {
let partial = `${('0' + value % 60).slice(-2)}`;
return partial;
}
}
Account
