Scribd
Upload
18 views

Timer With Javascript

Uploaded by

Hamada Mansour
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views

Timer With Javascript

Uploaded by

Hamada Mansour
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

<center>

<h1>
<span id="m"></span>
<span>:</span>
<span id="s"></span>
‫الوقت المتبقي للتأكيد من قبل المدرب‬
</h1>
<br>
</center>
<script>
var s=60;
var m=4;
var time= setInterval(function() {timer()}, 1000);
function timer(){
s--;
if(s==-1){
m--;
s=59;
if(m==-1){
m=0;
s=0;
clearInterval(time);
alert("‫;)"انتهى الوقت المحدد للتأكيد‬
}
}
document.getElementById("m").innerHTML = m;
document.getElementById("s").innerHTML = s;
}
</script>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Countdown Timer</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

font-family: Arial, sans-serif;

background-color: #e0f7fa;

#container {

text-align: center;

background: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h1 {

font-size: 2.5em;

color: #00796b;

margin: 0;

#timer {

display: flex;

justify-content: center;

align-items: baseline;
font-size: 4em;

font-weight: bold;

color: #004d40;

span {

margin: 0 5px;

#controls {

margin-top: 20px;

button {

font-size: 1em;

padding: 10px 20px;

margin: 5px;

border: none;

border-radius: 5px;

cursor: pointer;

background-color: #004d40;

color: white;

transition: background-color 0.3s;

button:hover {

background-color: #00332e;

#notification {

margin-top: 20px;

font-size: 1.2em;

color: #d32f2f;
}

#timeInput {

font-size: 1em;

padding: 10px;

margin: 10px;

border: 1px solid #00796b;

border-radius: 5px;

</style>

</head>

<body>

<div id="container">

<h1>‫< الوقت المتبقي‬/h1>

<div id="timer">

<span id="m">04</span>

<span>:</span>

<span id="s">00</span>

</div>

<div id="controls">

<input type="number" id="timeInput" placeholder="‫ "أدخل الوقت بالثواني‬min="1">

<button id="start">Start Timer</button>

<button id="stop">Stop Timer</button>

<button id="reset">Reset Timer</button>

</div>

<div id="notification"></div>

</div>

<script>
let s = 0; // ‫الثواني‬

let m = 0; // ‫الدقائق‬

let timerInterval;

const timeInput = document.getElementById("timeInput");

function formatTime(seconds) {

const minutes = Math.floor(seconds / 60);

const secs = seconds % 60;

return {

minutes: minutes.toString().padStart(2, '0'),

seconds: secs.toString().padStart(2, '0')

};

function updateTimerDisplay() {

const { minutes, seconds } = formatTime(m * 60 + s);

document.getElementById("m").innerText = minutes;

document.getElementById("s").innerText = seconds;

function startTimer() {

clearInterval(timerInterval); // Ensure no multiple intervals are running

const totalSeconds = parseInt(timeInput.value, 10);

if (isNaN(totalSeconds) || totalSeconds <= 0) {

alert("Please enter a valid time in seconds.");

return;

s = totalSeconds % 60;
m = Math.floor(totalSeconds / 60);

updateTimerDisplay();

timerInterval = setInterval(() => {

if (s === 0 && m === 0) {

clearInterval(timerInterval);

document.getElementById("notification").innerText = "‫;"انتهى الوقت المحدد للتأكيد‬

document.getElementById("notification").classList.add("alert");

playAlertSound();

return;

if (s === 0) {

m--;

s = 59;

} else {

s--;

updateTimerDisplay();

}, 1000);

document.getElementById("notification").innerText = "";

document.getElementById("notification").classList.remove("alert");

function stopTimer() {

clearInterval(timerInterval);

function resetTimer() {

clearInterval(timerInterval);
m = 0;

s = 0;

updateTimerDisplay();

document.getElementById("notification").innerText = "";

function playAlertSound() {

const audio = new Audio('alert.mp3'); // Make sure you have an alert sound file in the same directory

audio.play();

document.getElementById("start").addEventListener("click", startTimer);

document.getElementById("stop").addEventListener("click", stopTimer);

document.getElementById("reset").addEventListener("click", resetTimer);

// Initialize display

updateTimerDisplay();

</script>

</body>

</html>

You might also like