在 JavaScript 中閃爍文字
Anika Tabassum Era
2023年1月30日
2022年5月5日
-
在 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>
輸出:
Author: Anika Tabassum Era