社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > web前端 > js教程 > JavaScript实现表格快速变色效果代码_javascript技巧

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
发布： 2016-05-16 15:44:12
原创
1460 人浏览过

本文实例讲述了JavaScript实现表格快速变色效果的方法。分享给大家供大家参考。具体如下：

这里使用JavaScript实现一个极酷的表格特效，表格快速的变色，形成色彩炫丽的效果，第一眼看上去，甚至不像是表格。读者可以通过本代码来研究一下Js的相关特性，了解一些JS编程技巧。

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<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 表格
上一篇：jQuery实现的仿select功能代码_jquery 下一篇：js实现YouKu的漂亮搜索框效果_javascript技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板