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