在 JavaScript 中闪烁文本

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中闪烁文本

作者：迹忆客最近更新：2024/03/22 浏览次数：

本文将看到三个实现代码块以在 JavaScript 中启用文本闪烁的示例。

在 JavaScript 中使用 `window` 对象触发闪烁功能

我们将使用 window 对象的 addEventListener 方法来触发 load 事件。我们将设置闪烁的间隔，这里 1000 表示 1 秒。

这意味着它将在页面上保留文本一秒钟并消失一秒钟并重复。

代码片段：

<!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>

输出：

在 JavaScript 中使用 `onload` 属性设置闪烁功能

onload 属性通常添加在 body 元素中，每当文件在运行时，onload 函数首先被触发。因此，函数 blink() 已经定义了所有必要的声明，并且闪烁的文本执行了它的工作。

代码片段：

<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>

输出：

在 JavaScript 中使用 jQuery `ready()` 函数闪烁文本

jQuery ready() 事件仅在加载窗口时起作用。因此，该函数将在每次加载时声明它的作用。

setInterval 函数将更改显示的间隔，因此该函数将产生闪烁效果。

代码片段：

<!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>