近期在学着用easyui,发现框架用起来果然是方便简洁,能弄出这框架的都是大神级别了吧,牛啊....

今天碰到这个应用能够说是让我很之无语,整出源代码来一看就明确了。可之前却还是感觉很奇妙,我也经常告诉自己。要多动脑筋。实际上有一些也的确有想过。但实在是效果很牵强。而当源代码拿出来看的时候却又格外的明确。假设这时候我能够看到自己的表情。大抵就是一个纠结吧,假设说量变引起质变,那我的量还差的太多了,连见多识广都算不上,何谈创造啊。

先来分析下实现的原理吧。闪烁的原理是什么呢:事实上就一个,display在none与block之间频繁的交替,这样说你明确了么。

还是先上代码:

html部分:

 <div style="width: 50px;height: 50px;background-color: cyan;display: block;" id="showZone"></div>//是不是非常熟悉啊

javascript部分:

window.onload=function(){
var obj=document.getElementById("showZone");
var timer=null;
obj.onclick=function(){
var i=0;
clearInterval(timer);
timer=setInterval(function(){
obj.style.display=i++%2?"none":"block";//还是有收获的。这个写法比if..else想必简单了好多
i>8&&clearInterval(timer);//这个短路用的经典啊
},80);
};
};

尽管原理上简单,可是前辈的代码比我个人编写的代码要简单太多了。还是非常有收获的。

easyui也进入学习日程了,这一天天的是越排越满啊......加油,笨鸟飞飞飞.....

js实现div闪烁-------Day46的更多相关文章

  1. js控制div滚动条,滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  2. js实现div居中

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  5. 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  6. JS 实现DIV 滚动至顶部后固定

    JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...

  7. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  8. js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  9. 用键盘控制DIV && Div闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 小型Web应用扫描工具Grabber

    小型Web应用扫描工具Grabber   Grabber是Kali Linux集成的一款Web应用扫描工具.该工具适合中小Web应用,如个人博客.论坛等.该工具使用Python语言编写,支持常见的漏洞 ...

  2. 1.3(学习笔记)JSP(Java Server Pages)内置对象

    一.内置对象 内置对象又称内建对象.隐式对象,是由服务器自动创建实例化的, 用户在使用时不需要显示的创建,可直接使用. jsp内置对象名称,类型及作用域 Scope代表该内置对象的作用范围,page表 ...

  3. Oracle Linux 7.3下载与 dtrace安装

    https://docs.oracle.com/cd/E52668_01/E86280/html/section_edm_dvp_hz.html http://www.oracle.com/techn ...

  4. java 的 &和&&的区别

    public class Test { public static void main(String[] args) { String str = null; if(str != null & ...

  5. Docker实践3: Docker常用命令(未完)

    查看容器及运行进程 docker ps 查看容器内部信息 docker inspect container_id 进入容器 docker attach container_id 退出容器 docker ...

  6. 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境:3.安装Oracle RAC-3.6.集群管理命令

    3.6. 集群管理命令 3.6.1. RAC的启动与关闭 oracle rac默认会开机自启动,如需维护时可使用以下命令: 关闭: crsctl stop cluster 停止本节点集群服务 crsc ...

  7. 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境:2.搭建环境-2.10.配置用户NTF服务

    2.10.配置用户NTF服务 2.10.1.配置节点RAC1 1) [root@linuxrac1 sysconfig]#sed -i 's/OPTIONS/#OPTIONS/g' /etc/sysc ...

  8. vue2自定义事件之$emit

    父组件: API上的解释不多: https://cn.vuejs.org/v2/api/#vm-emit vm.$emit( event, […args] ) 参数: {string} event [ ...

  9. [Angular] Control the dependency lookup with @Host, @Self, @SkipSelf and @Optional

    Very differently to AngularJS (v1.x), Angular now has a hierarchical dependency injector. That allow ...

  10. linux 局域网内文件传送

    Linux scp命令用于Linux之间复制文件和目录,具体如何使用这里好好介绍一下,从本地复制到远程.从远程复制到本地是两种使用方式.这里有具体举例: ================== Linu ...