How to Blink Text in JavaScript

Anika Tabassum Era Feb 02, 2024 JavaScript JavaScript Blinking Text
  1. Use window Object to Trigger the Blink Function in JavaScript
  2. Use onload Attribute to Set Blink Function in JavaScript
  3. Use jQuery ready() Function to Blink Text in JavaScript
How to Blink Text in JavaScript

This article will see three examples of implementing a code block to enable text blinking in JavaScript.

We will use the addEventListener method for the window object to trigger the load event. We will set the interval for the blink, and here 1000 means 1 second.

This means it will keep the text on the page for one second and vanish for 1 second and repeat.

Code Snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="blink">Blink with window object</div>
  <script>
  window.addEventListener("load", function() {
    var b = document.getElementById('blink');
    setInterval(function() {
        b.style.display = (b.style.display == 'none' ? '' : 'none');
    }, 1000);
}, false);
  </script>
</body>
</html>

Output:

Use window Object to Trigger the Blink Function

The onload attribute is usually added in the body element, and whenever the file is in operation, the onload function gets fired at first. So, the function blink() has been defined with all necessary declarations, and the blinking text performs its job.

Code Snippet:

<html>
<body onload="blink();">
  <div id="blink">Blink on onload</div>
  <script>
  function blink() {
   var b = document.getElementById('blink');
   setInterval(function() {
      b.style.display = (b.style.display == 'none' ? '' : 'none');
   }, 1000);
}
  </script>
</body>
</html>

Output:

Use onload Attribute to Set Blink Function

Use jQuery ready() Function to Blink Text in JavaScript

The jQuery ready() event is functional only when the window is loaded. So, the function will play its role as it is declared on every load.

The setInterval function will change the displayed interval, and thus the function will create the blink effect.

Code Snippet:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.6.4.js"></script>
  <script>
  $(document).ready(function() {
    var b = document.getElementById('blink');
    setInterval(function() {
        b.style.display = (b.style.display == 'none' ? '' : 'none');
    }, 1000);
});
  </script>
<div id="blink">Blink with jQuery</div>
</body>
</html>

Output:

Use jQuery ready() Function to Blink Text

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
Author: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook