<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. [原创]java WEB学习笔记78：Hibernate学习之路---session概述，session缓存(hibernate 一级缓存)，数据库的隔离级别，在 MySql 中设置隔离级别，在 Hibernate 中设置隔离级别

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  2. ofbiz进击 个人遇到的奇葩问题汇总。

    在本人做退货单生成的时候,因为考虑到要控制通过java类方法去调用 service服务可以方便给出提示消息,所以专门新建了一个java类,然后去重新请求request请求,下面为Java类的代码 pu ...

  3. ubuntu安装jdk遇到的问题:cannot execute binary file

    安装完jdk,配置好环境变量出现如下状况: cannot execute binary file 问题原因: jdk的位数与ubuntu的系统位数不一致 jdk 64位 ubuntu 32位 然后通过 ...

  4. ACdream 1128 Maze（费用流）

    题目链接:http://acdream.info/problem?pid=1128 Problem Description wuyiqi陷入了一个迷宫中,这个迷宫是由N*M个格子组成的矩阵.每个格子上 ...

  5. struts请求基本类型参数接收

    01:导包,web.xml配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version ...

  6. mysql建库DATETIME、DATE 和 TIMESTAMP区别

    http://blog.sina.com.cn/s/blog_5f7b8c2c0100tf6t.html     DATETIME.DATE 和 TIMESTAMP 类型是相似的.本篇描述了它们的特性 ...

  7. oracle的函数

    1:nvl函数 nvl函数将一个null值转换为一个实际的值,数据类型可以是日期,数字,字符,数据类型必须匹配,vl能够转换任何数据类型,但是转换的数据类型返回值必须是nvl(expr1,expr2) ...

  8. ADO.NET中的TransactionScope何时需要启用MSTDC（分布式事务管理）

    我们知道在ADO.NET中可以用TransactionScope来将多个SqlConnection(多个数据库连接)执行的Sql语句放入一个事物中提交或取消,但是使用TransactionScope的 ...

  9. 视频处理控件TVideoGrabber中如何混合多个视频源（2）

    在前面的<视频处理控件TVideoGrabber混合多个视频源(1)>一文中,已经对TVideoGrabber中混合视频源做了一些内容的说明,本文将继续前文: >>>TV ...

  10. ubuntu使用记录

    常用指令 ls        显示文件或目录 -l           列出文件详细信息l(list) -a          列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir     ...