Javascript实现边框闪动

　　最近新作的一项目中有一块内容为充值部分，产品经理以为在用户余额不足的时候，除了禁止用户选择和输入的按钮外，应该让用户的视线集中到提示内容上，这样就能根据提示的内容快速进行充值操做。因而几个研究来研究去，最终决定让提示框的边框闪烁来达到提醒目的。

       因为项目须要兼容ie6，因此js成为了首选。考虑到js为单线程执行语言，因而递归超时调用方法为首选。

　　首先须要一个ID=blink的div，而后是两个不一样颜色边框的类，分别命名为border1和border2。css代码以下：

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

　　而后就是js代码部分：

(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,2000);
        }
        function modifyBorder()
        {
            borderFlag=!borderFlag;
            if(borderFlag)
            {
                div.removeClass("border1").addClass("border2");    
            }
            else
            {
                div.removeClass("border2").addClass("border1");
            }
        }
})()

 

　　整段js代码是放在了一个当即执行函数中，经过设置边框变换标示符和初始时间值，使用超时调用函数经过递归方法来实现边框的闪动效果。其中的间歇调用时间设为为2秒，for循环的次数表明了边框在2秒钟的时间内闪动的次数。代码很是简单，若是须要测试，别忘了引入Jquery库。