开发者

JavaScript code that can enable the text on the webbrowser to blink once

I have window application and on that there is one webbrowser control and I want to display the text on the webbrowser blinking one time and then it should not blinked more, is it possible ?

I have done with one javascript but it blinks the text frequently but I want text blinking only single time or maximum two time.The java script is :

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


The <blink> tag blinks repeatedly, regardless of JavaScript. That's what it was invented for and that's why everyone hates it. It's long deprecated and should never have existed in the first place. Avoid, along with the <br>-abuse, the inline styles, the passing of a string to setInterval and all mention of IE's broken 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>


Yes you will need to look at the function window.setTimeout() https://developer.mozilla.org/en/DOM/window.setTimeout

This will allow you to execute a JavaScript function once after a specified delay.

There is an alternate function https://developer.mozilla.org/en/DOM/window.setInterval which will repeat the execution over and over. That may not be of use to you.

You will have to use DOM to alter the background color of the window but that is a trivial exercise to find.


Of course you don't have to use jQuery, but here is an example:

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);
});


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

... then at the foot of the body

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

Obviously as @Justin-Johnson notes, using a library makes this easier.

In fact a more "standard" way of drawing attention to an element would be perhaps:

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

(jQuery doesn't seem to have prototype's highlight effect, this is a guess at what it would be.)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜