JavaScript实现表格快速变色效果代码

 更新时间:2015年08月19日 16:24:16   作者:佚名  
这篇文章主要介绍了JavaScript实现表格快速变色效果的方法,通过javascript数组遍历结合时间函数来实现表格快速变色的功能,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • JavaScript设计模式之迭代者模式详情

    JavaScript设计模式之迭代者模式详情

    这篇文章主要介绍了JavaScript设计模式之迭代者模式详情,迭代器设计模式能够可以让我们更方便的且有规矩的进行访问复合数据的每一项,也可以通过迭代器进行完成一些流线式操作
    2022-06-06
  • 使用递归遍历对象获得value值的实现方法

    使用递归遍历对象获得value值的实现方法

    下面小编就为大家带来一篇使用递归遍历对象获得value值的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javaScript合并对象的几个常见方式

    javaScript合并对象的几个常见方式

    JavaScirpt中有很多对象合并的方法,今天就做个笔记,记录一下这些方法,下面这篇文章主要介绍了javaScript合并对象的多种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • javascript获取URL参数与参数值的示例代码

    javascript获取URL参数与参数值的示例代码

    本篇文章主要是对javascript获取URL参数与参数值的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • js图片轮播手动切换特效

    js图片轮播手动切换特效

    这篇文章主要为大家详细介绍了js图片轮播手动切换特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JavaScript打开本地文件夹的4种方法举例

    JavaScript打开本地文件夹的4种方法举例

    这篇文章主要给大家介绍了关于JavaScript打开本地文件夹的4种方法,JavaScript在前端开发中是一种使用非常广泛的编程语言,常用于实现网页中的交互和动态效果,需要的朋友可以参考下
    2023-07-07
  • javascript ES6中箭头函数注意细节小结

    javascript ES6中箭头函数注意细节小结

    这篇文章主要给大家总结了关于javascript ES6中箭头函数注意细节的相关资料,文中介绍的比较详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • JS控制弹出新页面窗口位置和大小的方法

    JS控制弹出新页面窗口位置和大小的方法

    这篇文章主要介绍了JS控制弹出新页面窗口位置和大小的方法,实例分析了open方法弹出窗口的使用技巧,需要的朋友可以参考下
    2015-03-03
  • JS多物体实现缓冲运动效果示例

    JS多物体实现缓冲运动效果示例

    这篇文章主要介绍了JS多物体实现缓冲运动效果的方法,涉及javascript基于时间函数进行动态运算实现页面元素动态操作的相关技巧,需要的朋友可以参考下
    2016-12-12
  • 完美解决AJAX跨域问题

    完美解决AJAX跨域问题

    我看到过很多人不愿意去正视ajax所存在的技术瓶颈,其实AJAX更应该是Ajax而不是AJAX,突出第一个A是想强调其实AJAX发扬的是一种异步传输的方法,而不是具体到底使用了哪种技术
    2013-11-11

最新评论