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 相关文章推荐
javascript之学会吝啬 精简代码
Apr 25 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
js计算精度问题小结
2013/04/22 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
vue实现放大镜效果
2020/09/17 Javascript
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
详解numpy的argmax的具体使用
2019/05/27 Python
django API 中接口的互相调用实例
2020/04/01 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
自我评价格式
2014/01/06 职场文书
先进党支部事迹材料
2014/01/13 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
党员评议自我评价
2015/03/03 职场文书
个人年终总结范文
2015/03/09 职场文书