[在 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>
输出:


