在 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>
輸出：
在 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>
輸出：
-Function-to-Blink-Text.webp)
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
