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 相关文章推荐
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
angular组件间传值测试的方法详解
May 07 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
合作指挥官:孟斯克
2020/03/16 星际争霸
基于php无限分类的深入理解
2013/06/02 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
如何在Django项目中引入静态文件
2019/07/26 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
Python如何在bool函数中取值
2020/09/21 Python
python压包的概念及实例详解
2021/02/17 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
室内设计专业学生的自我评价分享
2013/11/27 职场文书
团组织关系介绍信
2014/01/12 职场文书
三八节主持词
2014/03/17 职场文书
爱牙日活动总结
2014/08/29 职场文书
党员民主评议总结
2014/10/20 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
城南旧事电影观后感
2015/06/16 职场文书