HOWTO · JavaScript
How to Blink Text in JavaScript
Learn how to create blinking text in JavaScript with three effective methods: using the window object load function, the onload attribute, and jQuery. This comprehensive guide provides clear explanations and practical code examples to enhance your web development skills. Explore how to make your text dynamic and engaging with these simple techniques. Perfect for beginners and experienced developers alike.
On this page
Blinking text can draw attention, but it can also distract readers. If the effect is appropriate for your page, JavaScript can toggle an element’s visibility on a timer. The examples below show three ways to choose when that timer starts: after the whole page loads, from an HTML onload attribute, or when jQuery reports that the DOM is ready. The first two wait for the page load event; jQuery ready() does not wait for images and other resources.
Use the window load event
The window load event fires after the document and its dependent resources, such as images, have finished loading. Register a listener for it when the effect should start only after the full page is ready. This standalone browser page also keeps the interval ID so a button can stop the effect.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Blink text after page load</title>
</head>
<body>
<p id="notice">Service is available</p>
<button id="stop" type="button">Stop blinking</button>
<script>
const notice = document.querySelector('#notice');
let blinkInterval;
window.addEventListener('load', () => {
blinkInterval = window.setInterval(() => {
notice.hidden = !notice.hidden;
}, 700);
});
document.querySelector('#stop').addEventListener('click', () => {
window.clearInterval(blinkInterval);
notice.hidden = false;
});
</script>
</body>
</html>
The callback flips the element’s hidden state every 700 milliseconds. A delay is a minimum scheduling interval, not a promise that every callback runs at an exact time. The stop button clears the repeating timer and makes the message visible again. For larger pages, prefer addEventListener to assigning window.onload, because assigning the property can replace a handler registered by other code.
Use the onload attribute
The body’s onload attribute is another way to start after the page load event. It calls a named function when loading finishes. This approach has similar timing to the window listener above, but puts JavaScript in an HTML attribute, which is harder to maintain and may conflict with a Content Security Policy that disallows inline handlers.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Blink text with onload</title>
</head>
<body onload="startBlink()">
<p id="notice">Service is available</p>
<button type="button" onclick="stopBlink()">Stop blinking</button>
<script>
let blinkInterval;
function startBlink() {
const notice = document.querySelector('#notice');
blinkInterval = window.setInterval(() => {
notice.hidden = !notice.hidden;
}, 700);
}
function stopBlink() {
window.clearInterval(blinkInterval);
document.querySelector('#notice').hidden = false;
}
</script>
</body>
</html>
Use this pattern mainly when maintaining a small example that already relies on inline handlers. In application code, a listener in a script keeps behavior separate from markup. The stop handler clears the same interval started by startBlink().
Use jQuery ready()
If a page already uses jQuery, $(document).ready() runs when the HTML document has been parsed and the DOM can be manipulated. It does not wait for every image or other page resource; use the window load event when those resources must finish first. jQuery is an optional dependency, and this example assumes it has been loaded before the following script.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Blink text with jQuery</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="notice">Service is available</p>
<button id="stop" type="button">Stop blinking</button>
<script>
$(document).ready(function () {
const $notice = $('#notice');
const blinkInterval = window.setInterval(function () {
$notice.toggle();
}, 700);
$('#stop').on('click', function () {
window.clearInterval(blinkInterval);
$notice.show();
});
});
</script>
</body>
</html>
The callback can safely select the paragraph because the DOM exists by then. .toggle() alternates whether the element is displayed. Do not add jQuery solely for this small effect if the page can use the native DOM APIs shown above.
Control the interval and stop it
setInterval(callback, delay) returns an interval ID. Keep that ID and pass it to clearInterval when the user stops the effect or when the component is removed. Starting another interval without clearing the first can create overlapping timers. Choose the delay to suit the message, and remember that browser scheduling can be delayed when a tab is inactive.
The supplied runtime case for this self-contained JavaScript example completed successfully and reported no stdout. It uses a small element object and a timer stub so its callback can be stepped without a browser. It illustrates the visibility toggle and cleanup; use one of the HTML examples above to operate on a real page element.
Run this example:
const notice = { style: { visibility: 'visible' } };
let tick;
let nextId = 0;
function startBlink(element) {
return setIntervalStub(() => {
element.style.visibility =
element.style.visibility === 'hidden' ? 'visible' : 'hidden';
}, 700);
}
function setIntervalStub(callback, delay) {
tick = callback;
return ++nextId;
}
function clearIntervalStub(id) {
if (id === nextId) tick = null;
}
const intervalId = startBlink(notice);
tick();
clearIntervalStub(intervalId);
In a browser implementation, replace the stub with window.setInterval and window.clearInterval, as the preceding pages do. Restore the element’s visible state when stopping so a timer that ended during the hidden phase does not leave important text concealed.
Accessibility and alternatives
Blinking can interrupt reading and may cause discomfort for some people. Avoid rapid flashing, do not use blinking as the only way to communicate important information, and provide a clear way to stop the effect. Consider whether a static emphasis, a brief color change, or a single fade communicates the same message with less movement. Respect user preferences for reduced motion when choosing animated effects, and keep essential text available even when motion is disabled. For routine status messages, a stable label or a well-marked update is often clearer than repeated blinking.
