Implement border flashing in Javascript

Implement border flashing in Javascript
In a new project recently, the product manager finds that when the user balance is insufficient, the product manager prohibits the user from selecting and inputting buttons, you should focus your attention on the prompt content so that you can quickly recharge your account based on the prompt content. So a few studies finally decided to make the frame of the prompt box flash to achieve the purpose of reminder. Because the project needs to be compatible with ie6, js has become the first choice. Considering that js is a single-threaded Execution Language, recursive timeout call is the first choice. First, a div with ID = blink is required, and then two classes with different color borders are named border1 and border2 respectively. The css code is as follows: 1 # blink {width: 300px; height: 36px; background-color: # ccc;} 2. border1 {border: 5px solid #000;} 3. border2 {border: 5px solid # cc0000;} And then JavaScript code: copy the code (function () {var div =$ ("# blink"); var borderFlag = false; var time; setTimeout (blinkBorder, 2000); function blinkBorder () {time = 0; for (var I = 0; I <6; I ++) {time + = 100; setTimeout (function () {modifyBorder () ;}, time) ;}settimeout (blinkBorder, 200 0);} function modifyBorder () {borderFlag =! BorderFlag; if (borderFlag) {div. removeClass ("border1 "). addClass ("border2");} else {div. removeClass ("border2 "). addClass ("border1") ;}}) () copies the entire JavaScript code segment in an immediate execution function. By setting the border transform identifier and initial time value, use the time-out call function to implement the flashing effect of the border through recursive methods. The interval call time is set to 2 seconds, And the for loop times represent the number of flashes of the border within 2 seconds. The code is very simple. If you need to test it, don't forget to introduce the Jquery library. Tags: javascript border flashing effect