js实现div闪烁-------Day46

最近在学着用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

时间: 2024-11-09 12:19:58

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

JS不断快速闪烁的图片

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JS不断快速闪烁的图片丨管道开孔</title> </head> <body ONLOAD="soccerOnload()"> <DIV ID="soccer"

用键盘控制DIV &amp;&amp; Div闪烁

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js把div固定在页面的右下角

http://www.ablanxue.com/prone_2866_1.html window.parent.onscroll = window.parent.onresize =  window.onload =function () { var oFix_box = document.getElementById('select-panel'); var oscrollTop = window.parent.document.documentElement.scrollTop || win

jquery和js对div的隐藏和显示

jQuery对div的显示和隐藏: 显示: $("#id").show() 隐藏: $("#id").hide() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";//隐藏

js使用div元素画柱形图

一.js使用div元素画柱形图 下面函数定义的是在id为chart的div中添加一个高度为height,宽度为width,柱形条间距为distance的柱形条:并根据高度值设置了不同的颜色,根据宽度的范围,选择合适的最大宽度.给柱形条添加了鼠标移入和移出的事件,移入显示该柱形条的信息,移出删除信息. 1 // 新增一个柱子 2 function addone(height,width,distance,value){ 3 var wrap = document.getElementById("c

js文字颜色闪烁

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js控制div是否显示

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,ul,li{ padding:0; margin:0} li { list-style:none; } .lis { wi

js 获取div 图片高度

使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $("img").css("width");(返回字符串:数字+"px") 但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异 jquery有以下两种常用的jquery事件加载的方法 $(function(){}); window.onload=function(){}

js改变div高度

用bootsrap响应式布局的时候,遇到个很恶心的问题:左边栏很短很难看!! 于是,想用js来自动改变左边的高度,没成功!!原来是设置的时候,没加单位,坑爹了. 参考:http://blog.sina.com.cn/s/blog_3d8c704c0101145y.html 设置高度的时候,加上px <script> function load(){ var height = window.innerHeight; document.getElementById("sidebarOut