i am starting some javascript projects and i found some difficulties with this timer first issue is that the stop button doesn't work and i tried many code but nothing works then each time i click on reset instead of going from 1 to 2 to 3 it goes 1 then 2 and 4 then 8 and so on i tried looking with the interval but the first time it goes right so i checked the reset function
var timer = document.querySelector("#timer");
var start = document.querySelector("#start");
var pause = document.querySelector("#stop");
var stop = document.querySelector("#stop");
var time_stopped = true;
var hours = 0;
var minutes = 0;
var seconds = 0;
function start_timer() {
if (time_stopped == true){
time_stopped = false;
cycle();
}
console.log("timer started!");
pause.style.display = "unset";
}
function stop_timer() {
if (stop_timer == false) {
stop_timer = true;
}
console.log("time stopped!");
pause.style.display = "none";
}
function restart_timer() {
timer.innerHTML = "00 00 00";
hours = 0;
minutes = 0;
seconds = 0;
time_stopped = true;
cycle();
}
function cycle() {
if (time_stopped == false) {
hours = parseInt(hours);
minutes = parseInt(minutes);
seconds = parseInt(seconds);
seconds = seconds + 1;
if (seconds == 60) {
minutes += 1;
seconds = 0;
}
if (minutes == 60) {
hours += 1;
minutes = 0;
}
if (seconds < 10 || seconds == 0) {
seconds = "0" + seconds;
}
if (minutes < 10 || minutes == 0) {
minutes = "0" + minutes;
}
if (hours < 10 || hours == 0) {
hours = "0" + hours;
}
timer.innerHTML = `${hours}:${minutes}:${seconds}`;
setInterval(cycle,1000);
}
}
and here's the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stopwatch (timer)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div id="timer">
00:00:00
</div>
<ul>
<button id="start" onclick="start_timer()">start</button>
<button id="stop" onclick="stop_timer()">stop</button>
<button id="restart" onclick="restart_timer()">restart</button>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire