집 > 기사 > 웹 프론트엔드 > 신속한 테이블 색상 변경을 위한 JavaScript 코드 effect_javascript 기술

신속한 테이블 색상 변경을 위한 JavaScript 코드 effect_javascript 기술

WBOY원래의: 2016-05-16 15:44:121350검색

이 기사의 예에서는 JavaScript를 사용하여 테이블의 빠른 변색 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여기에서는 JavaScript를 사용하여 매우 멋진 테이블 효과를 구현합니다. 테이블의 색상이 빠르게 바뀌어 얼핏 보면 테이블처럼 보이지도 않습니다. 독자는 이 코드를 사용하여 JS의 관련 기능을 연구하고 일부 JS 프로그래밍 기술을 배울 수 있습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-table-fast-cha-color-codes/

구체적인 코드는 다음과 같습니다.

<HTML>
<HEAD>
<TITLE>变色表格</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
</HEAD>
<body>
<script>
l=Array(0,1,2,3,4,5,6,7,8,9,'a','b','b','c','d','e','f');
function f(y)
{
 for(i=5;i<117;i++)
 {
 c=(i+y)%30;
 if(c>15)
  c=30-c;
 eval("document.all[i].bgColor='00"+l[c]+l[c]+"00'");
 }
 y++;
 setTimeout('f('+y+')','1');
}
function p(x)
{
 document.write("<td> </td>");
 x++;
 if((x%10==1)&&(x%100!=1))
 document.write("</tr><tr>");
 if(x<101)
 p(x);
 else
 {
 document.write("</tr>");
 f(1);
 }
}
document.write("<body bgcolor=0><table width=300 height=300 border=0 cellpadding=0 cellspacing=0><tr>");
p(1);
</script>
</body>
</HTML>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：jQuery_jquery로 구현된 모방 선택 함수 코드다음 기사：jQuery_jquery로 구현된 모방 선택 함수 코드

신속한 테이블 색상 변경을 위한 JavaScript 코드 effect_javascript 기술

관련 기사