当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

JS代码完成滚动的表格

JS代码完成滚动的表格

更新时间:2023-06-20 文章作者:未知 信息来源:网络 阅读次数:

编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

JS代码实现滚动的表格

【实例描述】

表格一般用来显示数据库中的信息,当数据库中内容过多时,可使用分页表格,也可以通过表格的滚动来显示数据。本例学习如何制作滚动的表格。

【实例代码】

 

<html> <head> <title>无标题文档-本站(www.xue51.com)</title> </head> <body> <script type="text/javascript">     marque(320,196,"icefable1","box1left")     var scrollElem;     var stopscroll;     var stoptime;     var preTop;     var leftElem;     var currentTop;     var marqueesHeight; //为表格添加事件 function marque(width,height,marqueName,marqueCName) {  try{    marqueesHeight = height;    stopscroll     = false;

   scrollElem = document.getElementById("mydiv");    with(scrollElem){   style.width     = width;   style.height    = marqueesHeight;   style.overflow  = 'hidden';   noWrap          = true;    }    scrollElem.onmouseover = new Function('stopscroll = true');    scrollElem.onmouseout  = new Function('stopscroll = false');    preTop     = 0;    currentTop = 0;    stoptime   = 0;    leftElem = document.getElementById("mydiv");    scrollElem.appendChild(leftElem.cloneNode(true));    init_srolltext();  }catch(e) {} } //表格滚动的初始化 function init_srolltext() {   scrollElem.scrollTop = 0;   setInterval('scrollUp()', 18); } //向上滚动的方法 function scrollUp() {   if(stopscroll) return;   currentTop += 1;   if(currentTop == marqueesHeight+1) {     stoptime += 1;     currentTop -= 1;     if(stoptime == (marqueesHeight)*1) {   //停顿时间       currentTop = 0;       stoptime = 0;     }   }else{     preTop = scrollElem.scrollTop;     scrollElem.scrollTop += 1;     if(preTop == scrollElem.scrollTop){       scrollElem.scrollTop = marqueesHeight;       scrollElem.scrollTop += 1;     }   } } </Script> </body> </html>

【运行效果】

运行效果

【难点剖析】

本例的重点是“scrollTop”属性。其在此例中表示表格的纵坐标位置,通过此值的递增来实现表格的滚动,图片和页面滚动同样是利用此属性。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:滚动的表格 进行本实例源码下载 


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html