<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Blinking Background Color
</
title
>
</
head
>
<
body
>
<
div
id
=
"blinkDiv"
style="width: 400px;
height: 100px;
padding: 20px;
text-align: center;
font-size: 24px;">
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
</
div
>
<
script
>
// Get the div element by its ID
const blinkDiv =
document.getElementById('blinkDiv');
// An array of colors to be used for blinking
const colors = ['#ff0000', 'black', '#0000ff'];
// Variable to keep track of the
// current color index
let currentColorIndex = 0;
// Function to toggle the background
// color of the div
function blinkBackground() {
blinkDiv.style.backgroundColor =
colors[currentColorIndex];
currentColorIndex =
(currentColorIndex + 1) % colors.length;
}
// Start the blinking by setting an interval
// that calls the blinkBackground
// function every 1000ms (1 second)
const blinkingInterval =
setInterval(blinkBackground, 1000);
// To stop blinking after 5 seconds,
// use setTimeout to clear the interval
setTimeout(() => {
clearInterval(blinkingInterval);
}, 5000);
</
script
>
</
body
>
</
html
>