JavaScript implementation Border Flashing

Recently a new project has a piece of content for the top-up part, the product manager felt that when the user balance is insufficient, in addition to prohibit users to select and input buttons, should let the user's line of sight to the prompt content, so that the content can be quickly based on the prompt recharge operation. So a few studies to study, and finally decided to let the border flashing cue box to achieve the purpose of reminding.

Because the project needs to be compatible with IE6, JS becomes the first choice. Given that JS is a single-threaded execution language, recursive timeout calls are preferred.

First you need a id=blink div, then a class of two different color borders, named Border1 and Border2, respectively. The CSS code is as follows:

1{ width:300px; height:36px; background-color:#ccc ;} 2  { border:5px solid #000;} 3  { border:5px solid #cc0000;}

Then there is the JS code section:

(function(){        vardiv=$ ("#blink"); varborderflag=false; varTime ; SetTimeout (Blinkborder,2000); functionBlinkborder () { time=0;  for(vari=0;i<6;i++) { time+=100; SetTimeout (function() {modifyborder ();                },time); } setTimeout (Blinkborder,2000); }        functionModifyborder () {Borderflag=!Borderflag; if(Borderflag) {Div.removeclass ("Border1"). AddClass ("Border2")); }            Else{Div.removeclass ("Border2"). AddClass ("Border1")); }        }})()

The entire JS code is placed in an immediate execution function, by setting the border transformation identifier and the initial time value, using the timeout call function through the recursive method to achieve the flashing effect of the border. The interval call time is set to 2 seconds, and the number of times for the For loop represents the number of times the bounding box flashes within 2 seconds. The code is very simple, and if you need to test it, don't forget to introduce the jquery library.