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


Posted in Javascript onAugust 19, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<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 基础学习笔记之文档处理
May 29 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 #Javascript
JS时间特效最常用的三款
Aug 19 #Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 #Javascript
JS模拟并美化的表单控件完整实例
Aug 19 #Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 #Javascript
Jquery基础教程之DOM操作
Aug 19 #Javascript
jquery小火箭返回顶部代码分享
Aug 19 #Javascript
You might like
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
详解JS面向对象编程
2016/01/24 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
海外淘书首选:AbeBooks
2017/07/31 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
大专毕业生求职信
2014/07/05 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript