替代 blink() 方法答案

【问题标题】：alternative to blink() method替代 blink() 方法
【发布时间】：2013-07-16 23:13:19
【问题描述】：

我需要在我的应用程序中具有闪烁功能。基本上，我正在创建一个计算器，我需要像“|”这样的东西在用户从按钮输入每个数字后闪烁。对于 Firefox 和 Opera，类似：

var str = "Hello world!";
document.write(str.blink());

这正是我想要的。我的问题是它们在 Chrome、IE 或 safari 中不起作用。如果我希望我的应用程序在跨浏览器上运行，是否有任何简单的替代方法或者我必须自己创建闪烁功能？

【问题讨论】：

@JoeEnos ：哈哈，这是真的，但你不认为你有时需要它：我没有让文本在这里闪烁。我只是在闪烁显示的文本中添加一个字符串。计算器右边需要眨眼，看起来很酷！
可能重复：stackoverflow.com/questions/4894488/blinking-text-cross-browser
Crikey - JavaScript 字符串在 Firefox 中有 blink 方法？
亲爱的主，这是真的。

标签： javascript html

【解决方案1】：

你可以只使用 css3 ：

@keyframes 'blink' {
   0% { background: rgba(255,0,0,0.5); }
   50% { background: rgba(255,0,0,0); }
   100% { background: rgba(255,0,0,0.5); }
}

【讨论】：

然后可能是 blink {-webkit-animation: blink 2s;} 和 document.write('<blink>Hello world!</blink>')（或实际将其写入当前文档的等效 JavaScript）。

【解决方案2】：

试试这个-:SOLUTION NO 1

您可以创建自己的自定义闪烁功能。这也可以通过创建 css 类并将它们添加到我们的元素来完成。

function blink()
    {
        setInterval(function () {
            document.getElementById("blink").style.webkitTransitionDuration = "0.7s";
            document.getElementById("blink").style.opacity = 0;
            setTimeout(function () {
                document.getElementById("blink").style.webkitTransitionDuration = "0.7s";
                document.getElementById("blink").style.opacity = 1;
            }, 700);
        },1400);

    }

或

试试这个-->解决方案 NO.2

JAVASCRIPT

function blink()
        {       
document.getElementById('blink').className = "animated blink_css";
        }

在 CSS 中

.animated {
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
}

  @keyframes 'blink' {
   0% { background: rgba(255,0,0,0.5); }
   50% { background: rgba(255,0,0,0); }
   100% { background: rgba(255,0,0,0.5); 
}
//try moz for mozilla,o for opera and webkit for safari and chrome 
    .blink_css {
        -webkit-animation-name: blink;
        -moz-animation-name: blink;
        -o-animation-name: blink;
        animation-name: blink;
    }

它们都可以工作。测试！！！

【讨论】：

我能知道原因吗？因为我用过这个功能，效果很好。
正如我提到的，您可以在 css 中创建类，然后将其应用于元素。
您的setInterval 未正确关闭，并且您的末尾有,1400);，这是不正确的。任何 JS 解析器都会告诉你这一点。
而且它没有任何解析错误，我已经测试过了，它工作得很好。
是的，现在它验证了 ;)

【解决方案3】：

如果你真的想要跨浏览器的兼容性，你应该使用一个库，例如 jQuery。

这是一个很好的小脚本，可以完成你想要的 - http://www.silverphp.com/simple-jquery-blink-script-alternative-to-html-blink-tag.html

另一方面，如果您更喜欢 vanilla JS，您可能必须自己实现它。也许将setInterval() 与使元素消失的功能一起使用？

【讨论】：