如何在 html/javascript 中使文本闪烁？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8360130/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a text flash in html/javascript?
提问by ivn
I know flashing text is banned at many places but still as my client requires it, I need to flash one line of text using HTML, JavaScript which ever is feasible. I would like the text to appear and disappear within seconds and continue this cycle.
我知道在很多地方都禁止闪烁文本，但仍然按照我的客户的要求，我需要使用 HTML 和 JavaScript 来闪烁一行文本，这是可行的。我希望文本在几秒钟内出现和消失并继续这个循环。
I know text-decoration:blink in CSS can do this but it only works in FireFox, Opera. And I need this to work in all browsers Firefox, Chrome, Safari, IE. I have searched and tried a lot of Javascript codes but none seem to be working.
我知道 CSS 中的 text-decoration:blink 可以做到这一点，但它只适用于 FireFox、Opera。我需要它在所有浏览器 Firefox、Chrome、Safari、IE 中工作。我已经搜索并尝试了很多 Javascript 代码，但似乎都没有工作。
So any one who knows how to do this, please post a working version of code which does flash the text in all browsers.
因此，任何知道如何执行此操作的人，请发布一个可以在所有浏览器中闪烁文本的代码的工作版本。
回答by Chris Baker
var blink_speed = 1000; // every 1000 == 1 second, adjust to suit
var t = setInterval(function () {
var ele = document.getElementById('myBlinkingDiv');
ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, blink_speed);<div id="myBlinkingDiv">Hello World, blinking is back!</div>I feel dirty.
我觉得脏。
回答by Mike Christensen
You can do something like this:
你可以这样做：
<div id="Foo">Blink</div>
With the script:
使用脚本：
$(document).ready(function() {
var f = document.getElementById('Foo');
setInterval(function() {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
});
Sample: http://jsfiddle.net/7XRcJ/
示例：http: //jsfiddle.net/7XRcJ/
If you're not using jQuery, you can try something like this:
如果你不使用 jQuery，你可以尝试这样的事情：
window.addEventListener("load", function() {
var f = document.getElementById('Foo');
setInterval(function() {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
}, false);
Various browsers have different ways of binding event handlers, so I would strongly suggest using some sort of cross-browser library for this sort of thing if possible.
各种浏览器有不同的绑定事件处理程序的方式，所以我强烈建议如果可能的话，对这类事情使用某种跨浏览器库。
You can also try using the onload event in the body tag. Here's a full example that I've tested in FF and IE7:
您也可以尝试在 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>回答by Manuel van Rijn
if you use jQuery you can do something like
如果你使用 jQuery 你可以做类似的事情
<div id="msg"> <strong>This will blink</strong> </div>
<script type="text/javascript" />
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
$(function() {
blink('#msg');
});
</script>
回答by kubetz
Have a look at this snippet.
看看这个片段。
function blinkIt() {
var blinks = document.getElementsByClassName("blink");
for(var i = 0, l = blinks.length; i < l; i++){
var blink = blinks[i];
var visiblity = blink.style.visibility;
blink.style.visibility = visiblity == 'visible' ? 'hidden' : 'visible';
}
}
setInterval(blinkIt, 500 /* blinking interval in ms */);
This solution will make allelements with class blinkblinking.
此解决方案将使所有具有类的元素blink闪烁。
EDIT: Tested on Firefox, Chrome and IE9.
编辑：在 Firefox、Chrome 和 IE9 上测试。
回答by SpaceBeers
If you really have to do this then you can use the blink plugin for jQuery
如果你真的必须这样做，那么你可以使用 jQuery 的闪烁插件
http://www.antiyes.com/jquery-blink-plugin
http://www.antiyes.com/jquery-blink-plugin
$(document).ready(function() {
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink({delay:100}); // causes a 100ms blink interval.
});
回答by dfmetro
You could make the text blink via jquery. Put the text you want to blink in a <blink>tag and the javascript below will make it blink. Increase the duration below if it blinks too fast.
您可以通过 jquery 使文本闪烁。将您想要闪烁的文本放在一个<blink>标签中，下面的 javascript 会使它闪烁。如果它闪烁太快，请增加下面的持续时间。
<script type="text/javascript">
setInterval(function(){
$('blink').each(function(){
$(this).css('visibility' , $(this).css('visibility') === 'hidden' ? '' : 'hidden')
});
}, 250);
</script>
<blink>Text to blink here</blink>
回答by NVRM
Using the web animation api:
使用网络动画api：
elem.animate([{opacity:0},{opacity:1}],{duration:300,iterations:Infinity})<h1 id="elem">WTF</h1>回答by Mahmud Oyshik
You can use something like this
你可以使用这样的东西
<html>
<head>
<style>
#blink{
color:black;opacity:1;font-size:3EM;
}
</style>
</head>
<body>
<div id="blink">
Poop
</div>
<script>
var ops,blink=document.getElementById('blink');
ops=1
setInterval(function (){
ops = (ops < 1) ? 1:0;
blink.style.opacity=ops;
},500);
</script>
</body>
回答by Jonathan Rich
CSS:
CSS：
.hidden { visibility: hidden; }
JS:
JS：
setInterval(blinkFunc, 200)
blinkFunc = function () {
var selector = '#some-selector';
jQuery(selector + ':visible').addClass('hidden');
jQuery(selector + ':not(:visible)').removeClass('hidden');
}
That's probably the most cross-browser. Note that Webkit does some crazy stuff with visibility so it might be easier to just change the color.
这可能是最跨浏览器的。请注意，Webkit 在可见性方面做了一些疯狂的事情，因此更改颜色可能会更容易。
