JavaScript实现表格快速变色效果代码
作者:代码拾荒时间:2026-10-29 14:01:55浏览:223
本文介绍了使用JavaScript实现表格快速变色效果的代码。通过动态修改表格单元格的背景颜色,形成色彩炫丽的视觉效果。代码包含生成表格结构和控制颜色变化的逻辑,适合研究JS相关特性和编程技巧。
JavaScript实现表格快速变色效果代码
本文分享一个使用JavaScript实现表格快速变色效果的具体实例,供读者参考学习。
该特效通过JavaScript代码实现表格颜色的快速切换,呈现出丰富的色彩变化,视觉效果独特。读者可通过此代码研究JavaScript的相关特性,掌握一些实用的编程技巧。
运行效果如下图所示:

在线演示地址如下:
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程序设计有所帮助。
作者最新文章
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
