如何使文本在 html/javascript 中闪烁？

我知道在很多地方都禁止闪烁文本，但仍然根据我的客户要求，我需要使用 HTML、JavaScript 来闪烁一行文本，这在任何情况下都是可行的。我希望文本在几秒钟内出现和消失并继续这个循环。

我知道 text-decoration:blink 在 CSS 中可以做到这一点，但它只适用于 FireFox、Opera。我需要它在所有浏览器 Firefox、Chrome、Safari、IE 中工作。我已经搜索并尝试了很多 Javascript 代码，但似乎都没有用。

所以任何知道如何做到这一点的人，请发布一个可以在所有浏览器中闪烁文本的代码的工作版本。

原文由 ivn 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 344

你可以这样做：

 <div id="Foo">Blink</div>

使用脚本：

 $(document).ready(function() {
    var f = document.getElementById('Foo');
    setInterval(function() {
        f.style.display = (f.style.display == 'none' ? '' : 'none');
    }, 1000);

});

示例：http: //jsfiddle.net/7XRcJ/

如果你不使用 jQuery，你可以尝试这样的事情：

 window.addEventListener("load", function() {
    var f = document.getElementById('Foo');
    setInterval(function() {
        f.style.display = (f.style.display == 'none' ? '' : 'none');
    }, 1000);

}, false);

各种浏览器有不同的绑定事件处理程序的方式，所以我强烈建议尽可能使用某种跨浏览器库来处理此类事情。

您也可以尝试在 body 标签中使用 onload 事件。这是我在 FF 和 IE7 中测试过的完整示例：

 function blink() {
   var f = document.getElementById('Foo');
   setInterval(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
   }, 1000);
}

 <html>
<body onload="blink();">

<div id="Foo">Blink</div>

</body>
</html>

原文由 Mike Christensen 发布，翻译遵循 CC BY-SA 3.0 许可协议

如何使文本在 html/javascript 中闪烁？

js 如何将Key属性相同的放在同一个数组？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

Stack Overflow 翻译