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