JavaScript实现表格快速变色效果代码

本文实例讲述了JavaScript实现表格快速变色效果的方法。分享给大家供大家参考。具体如下：

这里使用JavaScript实现一个极酷的表格特效，表格快速的变色，形成色彩炫丽的效果，第一眼看上去，甚至不像是表格。读者可以通过本代码来研究一下Js的相关特性，了解一些JS编程技巧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-table-fast-cha-color-codes/

具体代码如下：

<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程序设计有所帮助。

赞 (0)

相关推荐

  • 一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现

    第一个太简单就不说了,第二个也很简单,但每个人都有不同的实现方法,下面给一个比较简洁的做法,支持IE6.IE7.FF2,其他浏览器未测试(可以扩展一下用到ASP.NET的GridView里): 鼠标划过表格行变色-简洁实现 #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;paddin

  • Table隔行变色的JavaScript代码

    效果演示代码: 我们 www.jb51.net 我们 www.jb51.net 我们 www.jb51.net 我们 www.jb51.net function showtable(){ var color1 = "rgb(234,240,255)"; var color2 = "rgb(255,255,255)"; var bgColor = "rgb(255,255,193)"; var trs = document.getElementBy

  • javascript表格隔行变色加鼠标移入移出及点击效果的方法

    本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项.   说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1;  为了实现

  • javascript table美化鼠标滑动单元格变色

    http://www.w3.org/TR/html4/strict.dtd"> orbitz-like behavior for hovering over table cells .cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;} .cssguycomments p {font:normal 12px/18px verdana;} table {border-collapse:coll

  • 用javascript css实现GridView行背景色交替、鼠标划过行变色，点击行变色选中

    加上鼠标点击选择(其实只是点击后变个颜色,"选择"这个词在这里不合适),顺便把这个直接应用到GridView上,如果是其他的控件,或者直接的HTML,稍加修改也可以用上,这里仅提供一个思路.虽然GridView使用AlternatingRowStyle提供了交替行背景色的问题,但这个东西用着实在不爽,看它生成到HTML的那个table,那叫一个乱啊. 下面是代码,注释应该还算比较详细,比较适合初学者,可以把下面两个文件的代码直接复制到你的项目中直接执行.最下面有文件的下载地址,也可以直

  • javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox

    // 版本: 1.0 // 日期: 2007/08/01 // 备注: 需要jQuery库 // 参考: Dodo(tableRowCheckboxToggle) 和 softcomplex(tigra_tables) function Kin_Tables(                     Kin_Table_GetTableMethod, //得到Table的方法 同$()功能 必选参数                     Kin_Table_Header_Offset, //从

  • javascript实现可拖动变色并关闭层窗口实例

    本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法.分享给大家供大家参考.具体分析如下: 这是一款基于javascript+CSS实现层拖动的代码,不同的是它在拖动的时候窗口会变色,使操作体验更好一些,你可以运行代码查看效果.它还可以显示/隐藏或关闭打开的效果,没事的时候推敲一下 <html> <head> <title>拖动窗口</title> <meta http-equiv="Content-Type" con

  • JavaScript实现渐变色效果(不使用图片)

    JavaScript渐变色 diff[i])color1[i] = color1[i] - 1; color2[i] = diff[i] - color1[i]; color2[i] = color2[i] * 15; color2[i] = Math.round(color2[i] * Math.pow(10, 0)); } x=new Array(); two[0]=0; two[1]=0; two[2]=0; document.write(' '); if(direction==0) do

  • javascript实现table表格隔行变色的方法

    本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table间隔色</title

  • JavaScript实现表格快速变色效果代码

    JavaScript实现表格快速变色效果代码

    本文实例讲述了JavaScript实现表格快速变色效果的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现一个极酷的表格特效,表格快速的变色,形成色彩炫丽的效果,第一眼看上去,甚至不像是表格.读者可以通过本代码来研究一下Js的相关特性,了解一些JS编程技巧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-fast-cha-color-codes/ 具体代码如下: <HTML> <HEAD>

  • JavaScript实现表格动态变色

    JavaScript实现表格动态变色

    本文实例为大家分享了JavaScript实现表格动态变色的具体代码,供大家参考,具体内容如下 表格分为:表头.表格主体 两部分 当移动到表格主体的行时,移动到哪一行,哪一行就变化颜色,区分我们选中的行数,更明显的看到选中了哪一行 实现思路 1.获取表格主体的所有行 2.css定义一个背景颜色类 for循环遍历,将每行都分别绑定onmouseover.onmouseout事件, onmouseover(鼠标经过)- - - 该行类名赋值定义好的背景颜色类名 onmouseout(鼠标离开)- -

  • JavaScript实现上下浮动的窗口效果代码

    JavaScript实现上下浮动的窗口效果代码

    本文实例讲述了JavaScript实现上下浮动的窗口效果代码.分享给大家供大家参考.具体如下: 这里介绍使用JavaScript实现上下浮动的窗口,在垂直方向上漂浮,代码内的JS函数有超丰富的浮动层定义功能,像浮动层位置高度.初始化事件触发器.设定浮动层为可见,用style.left设定浮动层左边距.浮动层的运动速度等,还有更多的设置选项都能实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-up-down-float-move-win

  • JavaScript实现轮播图效果代码实例

    这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 HTML部分: <!-- HTML部分 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <link rel="styleshe

  • javascript合并表格单元格实例代码

    本文为大家介绍了一段来源于网络上的代码实例,能够合并单元格,下面和大家分享一下,希望能够给需要的朋友或多或少带来一定的帮助. 代码实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>表格单元格合并代码</title> <script type="text/javascript"> function au

  • JQuery拖动表头边框线调整表格列宽效果代码

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动手尝试实现,在此分享下小小的成果. 首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到. 为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件.

  • JavaScript 拖拽翻页效果代码

    拖拽翻页效果JavaScript特效-demo by http://www.jb51.net html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:1000px; height:500px; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:40

  • 原生javascript实现图片轮播效果代码

    看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿. [原理简述] html和css跟JQuery实现图片轮播效果里面的一样,略去.主要是几个公共函数,渐显和渐失,用闭包实现.至于主体逻辑部分,非常一般. [程序源码] 贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失 复制代码 代码如下: function id(name) {return document.getElementByI

  • JavaScript CSS创建右击菜单效果代码

    JavaScript CSS创建右击菜单效果代码

    效果图:  css和javascript创建页面右键菜单 body { font-family: "宋体"; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-family: "宋体"; line-height: 20px; cursor: default

  • Javascript 遮罩层和加载效果代码

    复制代码 代码如下: //loadingfunction showLoad(tipInfo) {var iWidth = 120; //弹出窗口的宽度;var iHeight = 0; //弹出窗口的高度;var scrolltop = 0;var scrollleft = 0;var cheight = 0;var cwidth = 0;var eTip = document.createElement('div');eTip.setAttribute('id', 'tipDiv');eTip

随机推荐