可以使网络浏览器上的文本闪烁一次的 JavaScript 代码答案

【问题标题】：JavaScript code that can enable the text on the webbrowser to blink once可以使网络浏览器上的文本闪烁一次的 JavaScript 代码
【发布时间】：2010-04-26 10:04:59
【问题描述】：

我有一个窗口应用程序，上面有一个 webbrowser 控件，我想在 webbrowser 上显示文本闪烁一次，然后它不应该再闪烁，这可能吗？

我已经使用了一个 javascript，但它经常闪烁文本，但我希望文本只闪烁一次或最多两次。java 脚本是：

<html><body onload=\"setInterval('blinkIt()',600)\"><br><br><b style ='color:Red;'><blink>" + "Please Follow Above Instruction To Continue Tour" + "</blink>" +
                                       "<script type=\"text/javascript\">" +
                                       "function blinkIt() {" +
                                       "var j=0;j++;if (!document.all) return;" +
                                       "else {" +
                                       "for(i=0;i<document.all.tags('blink').length;i++){" +
                                       "s=document.all.tags('blink')[i];" +
                                       "s.style.visibility=(s.style.visibility=='visible')?'hidden':'visible';if(j==4)break;" +
                                       "}}}</script>" + "</body></html>

【问题讨论】：

标签： c# javascript .net winforms webbrowser-control

【解决方案1】：

<blink> 标记反复闪烁，与 JavaScript 无关。这就是它的发明目的，这就是为什么每个人都讨厌它。它早已被弃用，一开始就不应该存在。避免与<br>-abuse 一起使用内联样式、将字符串传递给setInterval 以及所有提及IE 损坏的document.all。

<head>
    <style type="text/css">
        #blinkme { color: red; font-weight: bold; }
    </style>
</head>
<body>
    <p id="blinkme">Please Follow Above Instruction To Continue Tour</p>
    <script type="text/javascript">

        function Blinker(element, blinkn, period) {
            var blinki= 0;
            var interval= setInterval(function() {
                blinki++;
                if (blinki>=blinkn)
                    clearInterval(interval);
                element.style.visibility= 'hidden';
                setTimeout(function() {
                    element.style.visibility= 'visible';
                }, period/2);
            }, period);
        }

        Blinker(document.getElementById('blinkme'), 2, 1000);

    </script>
</body>

【讨论】：

【解决方案2】：

是的，您需要查看函数 window.setTimeout() https://developer.mozilla.org/en/DOM/window.setTimeout

这将允许您在指定延迟后执行一次 JavaScript 函数。

有一个备用函数https://developer.mozilla.org/en/DOM/window.setInterval 将一遍又一遍地重复执行。那可能对你没用。

您将不得不使用 DOM 来更改窗口的背景颜色，但这是一个简单的练习。

【讨论】：

【解决方案3】：

当然你不必使用 jQuery，但这里有一个例子：

var blink = function(element, duration, delay) {
    duration = duration || 1000;
    delay    = delay    || 0;

    setTimeout(function() {
        // Hide the element after `delay` ms
        element.css("visibility", "hidden");
        setTimeout(function() {
            // Show the element again after `duration` ms
            element.css("visibility", "visible");
        }, duration);
    }, delay);
};

// Initiate blink after document loads.
$(function() {
    blink($("#id-of-some-element"), 1000, 1000);
});

【讨论】：

【解决方案4】：

<div id="blinkin">My Blinkin' Message</div>

...然后在身体的脚下

 <script>
  setTimeout(function() {
    document.getElementById('blinkin').style.color = 'transparent'; // or 'white' for IE as @bobince notes?
  }, 600);
  setTimeout(function() {
    document.getElementById('blinkin').style.color = '';
  }, 1600);
 </script>

显然，正如 @Justin-Johnson 所说，使用库使这更容易。

事实上，一种更“标准”的方式来引起对元素的注意可能是：

$('blinkin').animate({backgroundColor: '#ffff99'}, 1000).animate({backgroundColor: '#ffffff'}, 2000);

（jQuery 似乎没有原型的highlight 效果，这是一个猜测。）

【讨论】：

嗯......在这种特殊情况下并不是真的，因为它已经很简单了！我认为仅仅为了替换document.getElementById 而拖入整个框架并不值得。总之，CSS2.1 不允许 transparent 值用于 color 属性。它在许多浏览器中都可以正常工作，但在 IE 中不行。
我添加了 id 以方便使用！但是，是的。库可以让您更轻松地提取背景颜色的值等以捕捉这种情况。