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 eval函数深入认识
Feb 21 Javascript
js 匿名调用实现代码
Jun 19 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
JS函数进阶之继承用法实例分析
Jan 15 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.ini中文版(2)
2006/10/09 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
PHP关联链接常用代码
2012/11/05 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Django REST framwork的权限验证实例
2020/04/02 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
Python调用Redis的示例代码
2020/11/24 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
实习生自我鉴定范文
2013/12/05 职场文书
秋季运动会稿件
2014/01/30 职场文书
信息员培训方案
2014/06/12 职场文书
楚门的世界观后感
2015/06/03 职场文书
可怜妈妈观后感
2015/06/09 职场文书