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++)
{