在 JavaScript 中閃爍文字

Anika Tabassum Era 2023年1月30日

JavaScript JavaScript Blinking Text

在 JavaScript 中使用 window 物件觸發閃爍功能
在 JavaScript 中使用 onload 屬性設定閃爍功能
在 JavaScript 中使用 jQuery ready() 函式閃爍文字

本文將看到三個實現程式碼塊以在 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>