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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
JS获取父节点方法
Aug 20 Javascript
JavaScript 函数调用规则
Sep 14 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 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图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
Python中threading模块join函数用法实例分析
2015/06/04 Python
开源Web应用框架Django图文教程
2017/03/09 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
如何用Python 加密文件
2020/09/10 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
个人自荐信
2013/12/05 职场文书
初一地理教学反思
2014/01/16 职场文书
优秀小学生家长评语
2014/01/30 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
活动总结书怎么写
2015/05/11 职场文书
热血教师观后感
2015/06/10 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python