Hello family I intended to make a Countdown Timer But I'm getting a problem I Tried a lot but I'm Getting nothing Please Help me to get out of this situation.
I want to make a stop button that resets every value of variable and also stops sound when I click on the stop button
This is my Code
<!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"> <link rel="stylesheet" href="./style.css"> <!-- <script src="./script.js"></script> --> <title>Timer</title> </head> <body> <input type="number" id="time-number" placeholder="Enter Seconds" /> <h3>Time Left <span id="time-left"></span></h3> <button id="start-button">Start</button> <button id="stop-button">Stop</button> <script> document.addEventListener("DOMContentLoaded", () => { const timeLeftDisplay = document.querySelector("#time-left"); const startButton = document.querySelector("#start-button"); const stopButton = document.querySelector("#stop-button"); var myAudio = new Audio("./sounds.mp3"); function countDown() { var timeleft = document.getElementById("time-number").value; console.log(timeleft); setInterval(function () { if (timeleft <= 0) { clearInterval((timeleft = 0)); myAudio.play(); } timeLeftDisplay.innerHTML = timeleft; timeleft -= 1; }, 1000); } startButton.addEventListener("click", countDown); stopButton.addEventListener("click", () => { myAudio.pause(); }); }); </script> </body> </html> 
没有评论:
发表评论