<body>

  <input type="text" value="test" onclick="flash(this)">

 </body>

 <script>

 function flash(elem){

    var elem = typeof elem === 'string' ? document.getElementById(elem) : elem, // 参数可接收id或者元素本身

        borderColor = elem.style.borderColor

    elem.style.borderColor = borderColor == 'red' ? elem.borderColor : 'red'

    if (!elem.timer) {

        elem.times = 6

        elem.borderColor = borderColor // 保存元素原来的边栏样式

        elem.timer = setInterval(function() { flash(elem) }, 180) // 这里直接以元素当做参数, 提升执行效率

    } else {

        if (elem.times == 0) {

            clearInterval(elem.timer)

            elem.timer = null

        }

        elem.times--

    }

}

 </script>

js实现元素边框闪烁功能的更多相关文章

  1. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  2. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  3. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  4. js、jquery实现模糊搜索功能

    模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...

  5. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  6. js javascript map函数去重功能的使用实例

    js javascript map函数去重功能的使用实例 先上一个实战例子代码 var map = new Map(); for(var i=0; i<=9; i++){ map.set(i,i ...

  7. JS实现“隐藏与显示”功能(多种方法)

    1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  8. 【转】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  9. 【原】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

随机推荐

  1. Ubuntu 16.04 LTS Final Beta about JAVA

    我们知道Ubuntu里可能会事先安装了openjdk.但是我习惯于Oracle jdk. ## < 卸载 openjdk > successfully: ### Terminal comm ...

  2. [转]Chrome 控制台console的用法

    Chrome 控制台console的用法 下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x&q ...

  3. Java基础(39):数据的四舍五入、去整、产生随机数---Math类的应用

    使用 Math 类操作数据 Math 类位于 java.lang 包中,包含用于执行基本数学运算的方法, Math 类的所有方法都是静态方法,所以使用该类中的方法时,可以直接使用类名.方法名,如: M ...

  4. sql except 用法，找两个表中非共同拥有的

    ;with tt as (select a.id as id from [dbo].[1234] a where a.id not in (select a.ProtocolID from Proto ...

  5. linux抓包方法

    tcpdump -i eth0 -X -w data.cap 得到的包保存到本地wireshark解析ip.addr == url && http.request.url contai ...

  6. Cortex-R5

    TCM:Tightly Coupled Memory,连接到RAM等memory中,但是CPU读写速度很快. ECC:Error Checking and Correction PMU:Perform ...

  7. web标准

    仔细看看所有的前端招聘要求,几乎所有的都要求对web标准有深刻的理解. web标准,是一系列标准的集合.对前端来说,因为网页是由结构.表现和行为组成.对应的就有结构化标准语言,主要包括XHTML和XM ...

  8. C语言初学者代码中的常见错误与瑕疵(1)

    曾在豆瓣上看到过一个小朋友贴出他自己的代码(http://www.douban.com/group/topic/40293109/),当时随口指点了几句.难得这位小朋友虚心修正.从善如流,不断地改,又 ...

  9. Sqlserver Sql Agent Job 只能同时有一个实例运行

    Sqlserver Sql Agent中的Job默认情况下只能有一个实例在运行,也就是说假如你的Sql Agent里面有一个正在运行的Job叫"Test Job",如果你现在再去启 ...

  10. 【NOIP模拟赛】lover——心上人

    心上人 [问题描述]  人到初三,总会遇到情感问题,比方说小 J 就喜欢上了小 W.于是小 J 就需要说一长串的话讨小 W 欢心.现在已知小 W 听到一些词就会很高兴,而且白听不厌,但她又讨厌小 J ...