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 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
基于vue--key值的特殊用处详解
Jul 31 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
PHP MSSQL 存储过程的方法
2008/12/24 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
php 字符串替换的方法
2012/01/10 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
Prototype Number对象 学习
2009/07/19 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python中optparse模块使用浅析
2015/01/01 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
python三方库之requests的快速上手
2019/03/04 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
优秀干部获奖感言
2014/01/31 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
见习报告的格式
2014/11/04 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
Python 中random 库的详细使用
2021/06/03 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python