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

Javascript 相关文章推荐
枚举JavaScript对象的函数
Dec 22 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
JS二维数组的定义说明
Mar 03 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 Javascript
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
SONY ICF-SW55的电路分析
2021/03/02 无线电
咖啡知识大全
2021/03/03 新手入门
正则表达式语法
2006/10/09 Javascript
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python样条插值的实现代码
2018/12/17 Python
Python函数中不定长参数的写法
2019/02/13 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
借款协议书范本
2014/04/22 职场文书
社区春季防火方案
2014/06/02 职场文书
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js