首页 > 代码库 > Javascript实现边框闪动
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库。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。