js实现div闪烁原理及实现代码

作者:whsnow 时间:2024-04-16 09:05:02 

最近在学着用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也进入学习日程了,这一天天的是越排越满啊......加油,笨鸟飞飞飞.....

标签:闪烁
0
投稿

猜你喜欢

  • 不同浏览器空格的宽度

    2007-08-22 08:29:00
  • 快速实现基于Python的微信聊天机器人示例代码

    2022-05-30 19:22:50
  • Laravel操作redis和缓存操作详解

    2023-05-25 02:19:29
  • django-rest-framework 自定义swagger过程详解

    2023-01-01 22:05:34
  • css有趣而诡异的数组

    2009-02-04 16:06:00
  • python+selenium 实现扫码免密登录示例代码

    2021-02-03 06:41:57
  • Java中Pattern用法实例(正则表达式)

    2023-05-19 15:02:57
  • python实现图片,视频人脸识别(opencv版)

    2023-03-14 12:41:07
  • javascript中的replace函数(带注释demo)

    2024-04-18 09:47:52
  • Perl中的文件读写学习笔记

    2022-07-10 09:13:55
  • jQuery 让人恋恋不舍的秘密

    2010-01-20 10:09:00
  • Python闭包和装饰器用法实例详解

    2021-04-07 10:05:02
  • asp清空站点缓存

    2009-08-04 18:01:00
  • Oracle 下医嘱执行函数

    2009-03-02 10:49:00
  • 如何减少SQL Server死锁发生的情况

    2009-02-24 17:49:00
  • Python Django ORM与模型详解

    2022-01-03 10:40:53
  • MySQL中使用流式查询避免数据OOM

    2024-01-23 01:23:00
  • Python中使用第三方库xlrd来读取Excel示例

    2022-04-22 06:29:41
  • 分析Python中设计模式之Decorator装饰器模式的要点

    2021-12-06 12:04:01
  • 分享15个最受欢迎的Python开源框架

    2021-06-22 12:17:08
  • asp之家 网络编程 m.aspxhome.com