Alternative for <blink>

后端 未结 14 2190
广开言路
广开言路 2020-11-27 06:39

The tag was never an official standard, and is now completely abandoned by all browsers.

Is there a standards compliant way of making text blink?

相关标签:
14条回答
  • 2020-11-27 06:50

    No, there isn't in HTML. There is a good reason why the developers chose to go out of their way to remove support for an element whose implementation was otherwise untouched for upwards of a decade.

    That said... you could emulate it using a CSS animation, but if I were you, I wouldn't risk CSS animations being axed due to being abused in this manner :)

    0 讨论(0)
  • 2020-11-27 06:51

    Please try this one and I guarantee that it will work

      <script type="text/javascript">
      function blink() {
      var blinks = document.getElementsByTagName('blink');
      for (var i = blinks.length - 1; i >= 0; i--) {
      var s = blinks[i];
      s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
    }
    window.setTimeout(blink, 1000);
    }
    if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
    else if (window.addEventListener) window.addEventListener("load", blink, false);
    else if (window.attachEvent) window.attachEvent("onload", blink);
    else window.onload = blink;
    

    Then put this below:

    <blink><center> Your text here </blink></div>
    
    0 讨论(0)
  • 2020-11-27 06:53

    Here's some code that'll substitute for the blink tag

    <p id="blink">This text will blink!</p>
    <script>
    var blacktime = 1000;
    var whitetime = 1000;
    //These can be as long as you desire in milliseconds
    setTimeout(whiteFunc,blacktime);
    function whiteFunc(){
        document.getElementById("blink").style.color = "white";
        setTimeout(blackFunc,whitetime);
    }
    function blackFunc(){
        document.getElementById("blink").style.color = "black";
        setTimeout(whiteFunc,blacktime);
    }
    </script>
    
    0 讨论(0)
  • 2020-11-27 06:55

    can use this

    @keyframes blinkingText
    {
        0%{     opacity: 1;    }
        40%{    opacity: 0; }
        60%{    opacity: 0; }
        100%{   opacity: 1;    }
    }
    
    .blinking
    {
        animation:blinkingText 2s reverse infinite;
    }
    
    0 讨论(0)
  • 2020-11-27 06:58

    The solution below is interesting because it can be applied across multiple elements concomitantly and does not trigger an error when the element no longer exists on the page. The secret is that it is called passing as a parameter a function in which you must return the elements you want to be affected by the blink. Then this function is called back with each blink. HTML file below:

    <!doctype>
    <html>
        <head>
            <style>
                .blink {color: red}
            </style>
        </head>
        <body>
            <h1>Blink test</h1>
            <p>
                Brazil elected President <span class="blink">Bolsonaro</span> because he 
                was the only candidate who did not promise <span class="blink">free things</span>
                to the population. Previous politicians created an image that would 
                bring many benefits, but in the end, the state has been getting more and 
                more <span class="blink">burdened</span>. Brazil voted for the 
                realistic idea that <span class="blink">there is no free lunch</span>.
            </p>
        </body>
        <script>
        var blink =
            {
                interval_in_miliseconds:
                    400,
                on:
                    true,
                function_wich_returns_the_elements: 
                    [],
                activate:
                    function(function_wich_returns_the_elements)
                    {
                        this.function_wich_returns_the_elements = function_wich_returns_the_elements;
                        setInterval(blink.change, blink.interval_in_miliseconds);
                    },
                change:
                    function()
                    {   
                        blink.on = !blink.on;
                        var i, elements = [];
                        for (i in blink.function_wich_returns_the_elements)
                        {
                            elements = elements.concat(blink.function_wich_returns_the_elements[i]());
                        }
                        for (i in elements)
                        {
                            if (elements[i])
                            {
                                elements[i].style.opacity = blink.on ? 1 : .2;
                            }
                        }
                    }
            };
        blink.activate
        (
            [
                function()
                {
                    var 
                        i,
                        node_collection = document.getElementsByClassName('blink'),
                        elements = [];
                    for (i = 0; i < node_collection.length; i++)
                    {
                        elements.push(node_collection[i]);
                    }
                    return elements;
                }
            ]
        );
        </script>
    </html>
    
    0 讨论(0)
  • 2020-11-27 06:59

    No there is not. Wikipedia has a nice article about this and provides an alternative using JavaScript and CSS: http://en.wikipedia.org/wiki/Blink_element

    0 讨论(0)
提交回复
热议问题