Scribd
Upload
20 views2 pages

Untitled 1

The document contains code for a countdown timer that displays minutes and seconds in a large font inside a bordered div. The timer counts down from a set number of seconds, changing color and flashing as it nears completion.

Uploaded by

Picclr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 views2 pages

Untitled 1

The document contains code for a countdown timer that displays minutes and seconds in a large font inside a bordered div. The timer counts down from a set number of seconds, changing color and flashing as it nears completion.

Uploaded by

Picclr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown Timer</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f7f7f7;
}
#timer {
font-size: 5em;
border: 2px solid #ccc;
padding: 20px;
border-radius: 10px;
background-color: white;
}
</style>
</head>
<body>
<div id="timer">00:00:00</div>
<script>
// Set the countdown time in seconds
var countdownTime = 60; // 1 minute for example

// Function to update the timer


function updateTimer() {
var minutes = parseInt(countdownTime / 60, 10);
var seconds = parseInt(countdownTime % 60, 10);

minutes = minutes < 10 ? "0" + minutes : minutes;


seconds = seconds < 10 ? "0" + seconds : seconds;

var timerElement = document.getElementById('timer');


timerElement.textContent = minutes + ":" + seconds;

// Change color to red as the timer goes down


var fraction = countdownTime / 60;
timerElement.style.color = fraction > 0.5 ? "green" : "red";

// Flash the timer as time is finishing


if (fraction <= 0.1) {
timerElement.style.opacity = timerElement.style.opacity == 1 ? 0.5 : 1;
}

if (--countdownTime < 0) {
clearInterval(intervalId);
}
}

// Update the timer every second


var intervalId = setInterval(updateTimer, 1000);
</script>
</body>
</html>

You might also like