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 特殊字符串
Feb 25 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
jquery offset函数应用实例
Nov 14 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 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
JS实现php的伪分页
2008/05/25 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
基于vue实现分页效果
2017/11/06 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python模拟用户登录验证
2017/09/11 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
会议接待欢迎词
2014/01/12 职场文书
食品安全检查制度
2014/02/03 职场文书
2014年售票员工作总结
2014/11/19 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
异地恋情人节寄语
2015/02/28 职场文书
创业计划书介绍
2019/04/24 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL