How to make a text flash in html/javascript?

后端未结

关注

 9  1736

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 lik

相关标签:

9条回答

故里飘歌

2020-12-18 02:43
If you really have to do this then you can use the blink plugin for jQuery

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.
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

长发绾君心

2020-12-18 02:48

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.

0 讨论(0)

我寻月下人不归

2020-12-18 02:50

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 all elements with class blink blinking.

EDIT: Tested on Firefox, Chrome and IE9.

0 讨论(0)

说谎

2020-12-18 02:58
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.
```
<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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

猫巷女王i

2020-12-18 03:00

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/

If you're not using jQuery, you can try something like this:

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:

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>

0 讨论(0)

说谎

2020-12-18 03:00
Using the web animation api:
```
elem.animate([{opacity:0},{opacity:1}],{duration:300,iterations:Infinity})
```
```
<h1 id="elem">WTF</h1>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页