Heim > Artikel > Web-Frontend > JavaScript-Code zum schnellen Ändern der Tabellenfarbe. effect_javascript-Kenntnisse

JavaScript-Code zum schnellen Ändern der Tabellenfarbe. effect_javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:44:121317Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Sie mithilfe von JavaScript den schnellen Verfärbungseffekt von Tabellen erzielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier verwenden wir JavaScript, um einen sehr coolen Tischeffekt zu implementieren, wodurch ein farbenfroher Effekt entsteht. Auf den ersten Blick sieht es nicht einmal wie ein Tisch aus. Leser können diesen Code verwenden, um die zugehörigen Funktionen von JS zu studieren und einige JS-Programmierkenntnisse zu erlernen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

<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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Nachahmung des von jQuery_jquery implementierten AuswahlfunktionscodesNächster Artikel：Nachahmung des von jQuery_jquery implementierten Auswahlfunktionscodes

In Verbindung stehende Artikel

Mehr sehen