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 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
vue页面更新patch的实现示例
Mar 25 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环境――Appserv
2006/12/13 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
行政主管岗位职责
2013/11/18 职场文书
简短证婚人证婚词
2014/01/09 职场文书
社区学习十八大感想
2014/01/22 职场文书
小学节能减排倡议书
2014/05/15 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
感谢信的格式
2015/01/21 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python