How to Blink Screen in JavaScript

Screen blinking on websites is generally used when the website wants to draw the user’s attention to a specific piece of information or action. Some common scenarios where screen blinking can be used when an error occurs, to alert the user that something went wrong and prompt them to take action, or about new messages, updates, or other important information, or to draw attention to a specific button or action that the user is being prompted to take, such as a “Buy now” or a “Subscribe” button.

This tutorial will demonstrate the procedure to blink the screen in JavaScript.

How to Blink Screen in JavaScript?

To blink the screen in JavaScript, use the “setInterval()” method to show some different functionality, like hide and show or change the elements or the background color.

Syntax

The following syntax is used for the setInterval() method:

setInterval(func, delay)

Example 1: Blink the Screen by Changing Background Color of the Page

First, get the reference of the “body” tag using the “querySelector()” method:

var body = document.querySelector("body");

Define a function called “blinkScreen()”, where we will change the background color of the page. This method will call in the “setInterval()” method:

function blinkScreen() {
if (body.style.backgroundColor === "white") {
body.style.backgroundColor = "#7ab0c4";
}
else {
body.style.backgroundColor = "white";
}
}

Now, invoke the “setInterval()” method by passing the defined function with a time delay as arguments:

setInterval(blinkScreen, 800);

It can be observed that the screen has been blinked by changing its background color after every 800 milliseconds:

Example 2: Blink the Subscribe Button

You can also use JavaScript to blink the screen by toggling the visibility of an element on the page. In the given example, we will blink the button in two ways.

First, create a “Subscribe” button in an HTML file and assign an id “subscribe”:

<button id="subscribe">Subscribe</button>

In <script> tag, fetch the “Subscribe” button using its assigned id:

var button = document.getElementById("subscribe");

Now, define a function “blinkSubscribeButton()” where we will change the color of the button and call this function in the setInterval() method:

function blinkSubscribeButton() {
if (button.style.backgroundColor === "white") {
button.style.backgroundColor = "#7ab0c4";
}else {
button.style.backgroundColor = "white";
}
}

Pass the specified function and the time delay in the setInterval() method as parameters:

setInterval(blinkSubscribeButton, 500);

Output

In the next given example, the subscribe button with the id of “subscribe” is initially hidden, and the setInterval() method is used to toggle its visibility between hidden and visible.

Create a “Subscribe” button in an HTML file, and set the visibility “hidden”:

<button id="subscribe" style="visibility: hidden;">Subscribe</button>

Get the reference of the button using “getElementById()” method:

var button = document.getElementById("subscribe");

Call the “setInterval()” method and in the callback function, show the button by setting its visibility to “visible”, and pass the time delay as an argument to the setInterval method:

setInterval(function() {
if (button.style.visibility === "hidden") {
button.style.visibility = "visible";
}else {
button.style.visibility = "hidden";
}
}, 500);

As you can see that the subscribe button is toggling on the screen after every 500 milliseconds:

Example 3: Blink the Screen Using CSS

You can also use the CSS class to blink any specific element on the web page.

In the following example, we will blink the heading by assigning a CSS class to it:

<h4 class="blink">Blink the Screen</h4>

In style sheet, create a class “blink” and set the animation style:

.blink {
animation: blink 1s linear infinite;
}

Set the keyframes of the blink class by changing its opacity:

@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}

Output

We have compiled all the necessary information relevant to the blinking screen in JavaScript.

Conclusion

To blink the screen, use the “setInterval()” method by passing the specified function or the callback function with the time delay. Screen blinking on websites is generally utilized when the website wants to draw the user’s attention to a specific piece of information or action. This tutorial demonstrated the procedure to blink the screen in JavaScript.

How to Blink Screen in JavaScript