高亮闪烁某个元素的js脚本_javascript技巧

页面上有些重要内容需要提醒客户，可采用的方法有很多。提醒用户关注某一区域(div)，可以给该div加上边框闪烁的效果，达到吸引用户眼球的效果。

<script language="javascript" type="text/javascript"> <!-- /*常用函数库---开始---*/ function $(objString){ return document.getElementById(objString); } function addClass(elem,classString){ if(typeof(elem)=="string") var obj = document.getElementById(elem); else if(typeof(elem)=="object") var obj = elem; obj.className = obj.className + " "+classString; } function removeClass(elem,classString){ if(typeof(elem)=="string") var obj = document.getElementById(elem); else if(typeof(elem)=="object") var obj = elem; var classNameArray = obj.className.split(" "); for (i=0; j=classNameArray[i] ; i++){ if(j==classString){ classNameArray.splice(i,1); i--; } } obj.className = classNameArray.join(" "); } function hasClass(elem,classString){ if (typeof(elem)=="string"){ var obj = document.getElementById(elem); }else if(typeof(elem)=="object"){ var obj = elem; } if (obj.className.indexOf(" ")!=-1){ var cls = obj.className.replace(/ /g,"|"); cls = "|"+cls+"|"; if (cls.indexOf("|"+classString+"|")!=-1){ return true; }else{return false} }else{ if (obj.className == classString){ return true; }else{ return false; } } } /*常用函数库---结束---*/ function highLight(obj){ if (obj.highlightHandel!=null) return; obj.highlightHandel = setInterval(function(){twinkle(obj)},250); } function twinkle(objBox){ hasClass(objBox,"highLight")?removeClass(objBox,"highLight"):addClass(objBox,"highLight"); } function stopTwinkle(obj){ clearInterval(obj.highlightHandel); removeClass(obj,"highLight"); obj.removeAttribute("highlightHandel"); } //--> </script> <style> .box {border:1px solid #ccc; height:100px; width:600px; text-align:center; line-height:100px; background-color:#f7f7f7} .highLight {background-color:#ffffcc; border:1px solid #f30} </style> <div id="demo" class="box"> Box I </div> <input type="button" value="闪烁" onclick="highLight($('demo'))"> <input type="button" value="停止" onclick="stopTwinkle($('demo'))"> <div id="demo2" class="box"> Box II </div> <input type="button" value="闪烁" onclick="highLight($('demo2'))"> <input type="button" value="停止" onclick="stopTwinkle($('demo2'))">
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

代码里包含有几个常用函数(已用注释分割开)，可用 prototype.js 中的方法替换，下面的几个函数略作修改也可运行。