> 웹 프론트엔드 > JS 튜토리얼 > js는 div 깜박임 원리 및 구현 code_javascript 기술을 구현합니다.

js는 div 깜박임 원리 및 구현 code_javascript 기술을 구현합니다.

WBOY
풀어 주다: 2016-05-16 16:43:23
원래의
977명이 탐색했습니다.

최근 easyui 사용법을 배우고 있는데, 이 프레임워크를 만들 수 있는 사람은 누구나 마스터 수준에 있을 것 같고, 정말 대단합니다....

오늘 이 애플리케이션을 접했을 때 말문이 막혔습니다. 소스 코드를 보자마자 바로 이해가 되었지만, 그 전에는 여전히 매우 마법 같은 느낌이 들었습니다. 사실 몇 가지가 있습니다. 정말 생각해봤는데 효과는 정말 어마어마하네요. 소스코드를 꺼내서 보니 이때 제 표정을 보면 아주 확연히 이해가 되더라구요. tangle. 양적 변화가 질적 변화로 이어진다면, 나는 창의력은커녕 지식도 부족하다고 할 수 없습니다.

먼저 구현 원리를 분석해 보겠습니다. 깜박임의 원리는 무엇입니까? 실제로는 없음과 차단이 자주 번갈아 나타납니다.

코드부터 시작해 보겠습니다.

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&#63;"none":"block";//还是有收获的,这个写法比if..else想必简单了好多 
i>8&&clearInterval(timer);//这个短路用的经典啊 
},80); 
}; 
};
로그인 후 복사

원칙적으로는 단순하지만, 제가 직접 작성한 코드보다 선배님들의 코드가 훨씬 단순해서 지금도 보람이 큽니다.

EasyUI도 공부 일정에 들어갔는데, 일정이 날이 갈수록 점점 더 꽉 차네요... 자, 멍청한 새 페이페이 페이페이...

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿