tag - html菜鸟

<blink>的替代方案 (8)

<blink>标签从来都不是官方标准，现在所有浏览器都完全放弃了。

是否有符合标准的文本闪烁方式？

一个小的javascript片段来模仿眨眼，甚至不需要css

<span id="lastDateBlinker">
    Last Date for Participation : 30th July 2014
</span>

<script type="text/javascript">
    function blinkLastDateSpan() {
        if ($("#lastDateBlinker").css("visibility").toUpperCase() == "HIDDEN") {
            $("#lastDateBlinker").css("visibility", "visible");
            setTimeout(blinkLastDateSpan, 200);
        } else {
            $("#lastDateBlinker").css("visibility", "hidden");
            setTimeout(blinkLastDateSpan, 200);
        }
    }
    blinkLastDateSpan();
</script>

下面的解决方案很有趣，因为它可以同时应用于多个元素，并且当页面上不再存在元素时不会触发错误。秘诀在于它被称为传递函数，在该函数中必须返回想要受闪烁影响的元素。然后每次闪烁都会调用此函数。 HTML文件如下：

<!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>

不，那里没有。维基百科有一篇很好的文章，并提供了一个使用JavaScript和CSS的替代方案： http://en.wikipedia.org/wiki/Blink_element ： http://en.wikipedia.org/wiki/Blink_element

仅使用HTML和CSS闪烁文本

<span class="blinking">I am blinking!!!</span>

现在CSS代码

    .blinking{
        animation:blinkingText 0.8s infinite;
    }

    @keyframes blinkingText{
        0%{     color: #000;    }
        49%{    color: transparent; }
        50%{    color: transparent; }
        99%{    color:transparent;  }
        100%{   color: #000;    }
    }

您可以利用JavaScript的setInterval函数：

const spanEl = document.querySelector('#spanEl');
var interval = setInterval(function() {
  spanEl.style.visibility = spanEl.style.visibility === "hidden" ? 'visible' : 'hidden';
}, 250);

<span id="spanEl">This text will blink!</span>

浏览器放弃了blink元素：Firefox支持版本22，Opera支持版本12。

HTML5 CR是第一个提到blink草案规范，它将其声明为“过时”，但是（在Rendering部分中）描述了它的“预期渲染”规则

blink { text-decoration: blink; }

并建议使用CSS替换该元素。实际上有几种在CSS和JavaScript中模拟blink替代方法，但提到的规则是最简单的： text-decoration的值blink专门定义为提供与blink元素相对应的CSS。但是，对它的支持似乎与blink元素一样有限。

如果您真的希望以跨浏览器方式使内容闪烁，您可以使用简单的JavaScript代码，以便以定时方式将内容更改为不可见，返回可见等。为了获得更好的结果，您可以使用CSS动画，浏览器支持稍微有限。

这是一个适合您需求的Web组件： blink-element 。
您只需将内容包装在<blink-element> 。

<blink-element>
    <!-- Blinking content goes here -->
</blink-element>

这里有一些代码可以代替blink标签

<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>