在 JavaScript 中闪烁文本

Anika Tabassum Era 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中使用 window 对象触发闪烁功能
  2. 在 JavaScript 中使用 onload 属性设置闪烁功能
  3. 在 JavaScript 中使用 jQuery ready() 函数闪烁文本
在 JavaScript 中闪烁文本

本文将看到三个实现代码块以在 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>

输出:

使用 window 对象触发闪烁功能

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

输出:

使用 onload 属性设置闪烁功能

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

输出:

使用 jQuery 的 ready() 函数来闪烁文本

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