zoukankan      html  css  js  c++  java
  • js实现div闪烁-------Day46

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

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

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

    还是先上代码:

    html部分:

     <div style=" 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也进入学习日程了,这一天天的是越排越满啊......加油,笨鸟飞飞飞.....




  • 相关阅读:
    学习篇之String()
    js之Math对象
    js之date()对象
    css之描点定位方式
    js详解之作用域-实例
    js精要之构造函数
    js精要之继承
    js精要之模块模式
    js精要之对象属性
    js精要之函数
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/6808474.html
Copyright © 2011-2022 走看看