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 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
Javascript验证方法大全
Sep 21 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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获取网卡地址的代码
2008/04/09 PHP
php入门教程 精简版
2009/12/13 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
Python2.7 实现引入自己写的类方法
2018/04/29 Python
python爬虫超时的处理的实例
2018/12/19 Python
python三方库之requests的快速上手
2019/03/04 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
《再别康桥》教学反思
2014/02/12 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
5行Python代码实现一键批量扣图
2021/06/29 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server