编程 Javascript

JS实现网页表格自动变大缩小的方法

Posted in Javascript onMarch 09, 2015

本文实例讲述了JS实现网页表格自动变大缩小的方法。分享给大家供大家参考。具体分析如下：

这就是一个个性的动态表格效果代码，网页中的表格自动放大或者缩小，不停的变化
主要就是一个强调显示的作用

<HTML>

<HEAD>

<TITLE>js会动的表格</TITLE>

<META content="text/html; charset=hz-gb-2312" http-equiv=Content-Type>

<STYLE>.cellstyle {

 COLOR: #ffffff; FONT-FAMILY: Times; FONT-SIZE: 11pt; FONT-WEIGHT: bold

}

A {

 COLOR: #ff0000; TEXT-DECORATION: none

}

A:hover {

 COLOR: #ff8888; TEXT-DECORATION: underline

}

</STYLE>

<SCRIPT language=javaScript>

var i_bordercolor=0

var i_bordercolorlight=10

var i_bordercolordark=20

var v_bordercolor=1

var v_bordercolorlight=1

var v_bordercolordark=1

var textcolor= new Array()

textcolor[0] ="FFFFFF"

textcolor[1] ="FFF8F8"

textcolor[2] ="FFF0F0"

textcolor[3] ="FFD8D8"

textcolor[4] ="FFD0D0"

textcolor[5] ="FFC8C8"

textcolor[6] ="FFC0C0"

textcolor[7] ="FFB8B8"

textcolor[8] ="FFB0B0"

textcolor[9] ="FFA8A8"

textcolor[10] ="FFA0A0"

textcolor[11] ="FF9898"

textcolor[12] ="FF9090"

textcolor[13] ="FF8888"

textcolor[14] ="FF8080"

textcolor[15] ="FF7878"

textcolor[16] ="FF7070"

textcolor[17] ="FF6868"

textcolor[18] ="FF6060"

textcolor[19] ="FF5858"

textcolor[20] ="FF5050"

textcolor[21] ="FF4848"

textcolor[22] ="FF4040"

textcolor[23] ="FF3838"

textcolor[24] ="FF3030"

textcolor[25] ="FF2828"

textcolor[26] ="FF2020"

textcolor[27] ="FF1818"

textcolor[28] ="FF1010"

textcolor[29] ="FF0808"

textcolor[30] ="FF0000"

function checkbrowser() {

    if (document.layers) {

     alert("This script requires Internet Explorer 4 or higher. Sorry folks!")

 }

    if (document.all) {

     bordercolor()

 }

}

function bordercolor() {  

if (i_bordercolor >= textcolor.length-1) {v_bordercolor*=-1}

    if (i_bordercolor <= 0) {v_bordercolor*=-1}

    if (i_bordercolordark >= textcolor.length-1) {v_bordercolordark*=-1}

    if (i_bordercolordark <= 0) {v_bordercolordark*=-1}

    if (i_bordercolorlight >= textcolor.length-1) {v_bordercolorlight*=-1}

    if (i_bordercolorlight <= 0) {v_bordercolorlight*=-1}

    document.all.cellone.borderColor=textcolor[i_bordercolor]

    document.all.cellone.borderColorDark=textcolor[i_bordercolordark]

    document.all.cellone.borderColorLight=textcolor[i_bordercolorlight]

    document.all.cellone.border=i_bordercolorlight*2

    i_bordercolor+=v_bordercolor

    i_bordercolordark+=v_bordercolordark

    i_bordercolorlight+=v_bordercolorlight

    var timer=setTimeout("bordercolor()",100)

}

</SCRIPT>

<META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD>

<BODY background="" bgColor=#ffffff onload=checkbrowser()>

<P align=center>

<TABLE border=0 cellPadding=6 id=cellone width=540 height="30">

  <TBODY>

  <TR>

    <TD align=middle class=cellstyle height="16">

      <font color="#800000">https://3water.com</font>

      </TR></TBODY>

</TABLE>

</BODY>

</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

JS实现网页表格自动变大缩小的方法

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS类中定义原型方法的两种实现的区别

Mar 08 Javascript

文本有关的样式和jQuery求对象的高宽问题分别说明

Aug 30 Javascript

Json和Jsonp理论实例代码详解

Nov 15 Javascript

jquery实现的缩略图预览滑块实例

Jun 25 Javascript

JS加载iFrame出现空白问题的解决办法

May 13 Javascript

javascript实现table单元格点击展开隐藏效果(实例代码)

Apr 10 Javascript

Vue2递归组件实现树形菜单

Apr 10 Javascript

jQuery动态追加页面数据以及事件委托详解

May 06 jQuery

Thinkphp5微信小程序获取用户信息接口的实例详解

Sep 26 Javascript

解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题

Aug 25 Javascript

微信小程序 textarea 层级过高问题简单解决方案

Oct 14 Javascript

Vue+element-ui添加自定义右键菜单的方法示例

Dec 08 Vue.js

EasyUI中datagrid在ie下reload失败解决方案

Mar 09 #Javascript

JS控制网页动态生成任意行列数表格的方法

Mar 09 #Javascript

jQuery随机密码生成的方法

Mar 09 #Javascript

jQuery实现简单的间隔向上滚动效果

Mar 09 #Javascript

jQuery实现鼠标划过展示大图的方法

Mar 09 #Javascript

javascript 对象数组根据对象object key的值排序

Mar 09 #Javascript

jquery插件corner实现圆角边框的方法

Mar 09 #Javascript

You might like

第十节抽象方法和抽象类 [10]

2006/10/09 PHP

php 修改、增加xml结点属性的实现代码

2013/10/22 PHP

php类声明和php类使用方法示例分享

2014/03/29 PHP

php使用memcoder将视频转成mp4格式的方法

2015/03/12 PHP

Javascript typeof 用法

2008/12/28 Javascript

用JavaScript实现单继承和多继承的简单方法

2009/03/29 Javascript

js checkbox(复选框) 使用集锦

2009/04/28 Javascript

AJAX的跨域与JSONP(为文章自动添加短址的功能)

2010/01/17 Javascript

在Ajax中使用Flash实现跨域数据读取的实现方法

2010/12/02 Javascript

jquery实现更改表格行顺序示例

2014/04/30 Javascript

jQuery实现的纵向下拉菜单实例详解【附demo源码下载】

2016/07/09 Javascript

vuejs绑定class和style样式

2017/04/11 Javascript

javascript用rem来做响应式开发

2018/01/13 Javascript

Node.js中你不可不精的Stream（流）

2018/06/08 Javascript

最简单的JS实现json转csv的方法

2019/01/10 Javascript

微信小程序获取用户绑定手机号方法示例

2019/07/21 Javascript

Vue通过for循环随机生成不同的颜色或随机数的实例

2019/11/09 Javascript

Vue中el-form标签中的自定义el-select下拉框标签功能

2020/04/20 Javascript

Node.js API详解之 repl模块用法实例分析

2020/05/25 Javascript

原生js实现无缝轮播图效果

2021/01/28 Javascript

在Docker上开始部署Python应用的教程

2015/04/17 Python

python 链接和操作 memcache方法

2017/03/04 Python

numpy中索引和切片详解

2017/12/15 Python

python抓取需要扫微信登陆页面

2019/04/29 Python

Python OpenCV实现视频分帧

2019/06/01 Python

python实现银行实战系统

2020/02/26 Python

Interhome丹麦：在线预订度假屋和公寓

2019/07/18 全球购物

市政施工员自我鉴定

2014/01/15 职场文书

奠基仪式主持词

2014/03/20 职场文书

新农村建设典型材料

2014/05/31 职场文书

安全生产标语大全

2014/10/06 职场文书

见习报告怎么写

2014/10/31 职场文书

办公室主任岗位职责

2015/01/31 职场文书

文明旅游倡议书

2015/04/28 职场文书

赢在中国观后感

2015/06/02 职场文书

python绘图subplots函数使用模板的示例代码

2021/04/30 Python