[ABI 5.1] 多个表格同时进行走马灯脚本

10107
9

Hannah 小试身手Lv3

发表于2020-8-19 09:45

悬赏1

已解决

楼主
ABI5.2.2   引用了社区大神的分析表走马灯效果脚本,求问,如何修改能使多个分析表一起进行走马灯效果?试了几种写法,都只能针对一张表进行走马灯,如下代码是其中一种写法,无法实现。麻烦帮忙看一下。





var speed = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)
var offpos = 1; //每次向上偏移量,单位为像素(可修改)
var tabledom = document.getElementById("GRID5"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)
var bodydiv = document.getElementById("HHH46"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)
var tabledom = document.getElementById("GRID13");
var bodydiv = document.getElementById("HHH47");
bodydiv.style.overflow="hidden";
var position = 0;
var height = tabledom.clientHeight;
var paused = false; //是否暂停
function scroller() {
if( paused ) return;
if((0 - position ) === height ){
position = bodydiv.clientHeight;
tabledom.style.top = position + "px";
}
position -= offpos;
tabledom.style.top = position + "px";
}
    setInterval("scroller()", speed);//自动滚动
//鼠标点击停止或继续(如果不需要可以去掉下面的脚本)
document.body.onmousedown = function(){
    paused = !paused;
}



最近看过此主题的会员

esen_542KO2E0X8

esen_55I6HYQMKG

esen_54GYD4B83T

18351933809

chestnut

关壮壮

最佳答案

xxxl

发表于2020-8-19 09:45

只看该作者

取消 关注该作者的回复

Hannah 发表于 2020-8-19 10:49
这是导出的分析表,给您作为一个参考。
走马灯的效果是在tab页中实现的,同时tab标签页需要自动切换。( ...

这是两个表格走马灯代码,加了1的就是要修改的变量,另外附件这个表样,文件中装入本地文件就可以使用 两个表格走马灯效果.rar (2.63 KB, 下载次数: )
  1. var speed = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)

  2. var offpos = 1; //每次向上偏移量,单位为像素(可修改)

  3. var tabledom = document.getElementById("GRID1"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)

  4. var bodydiv = document.getElementById("HHH2"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)

  5. bodydiv.style.overflow="hidden";

  6. var position = 0;

  7. var height = tabledom.clientHeight;

  8. var paused = false; //是否暂停

  9. function scroller() {

  10. if( paused ) return;

  11. if((0 - position ) === height ){

  12. position = bodydiv.clientHeight;

  13. tabledom.style.top = position + "px";

  14. }

  15. position -= offpos;

  16. tabledom.style.top = position + "px";

  17. }

  18.     setInterval("scroller()", speed);//自动滚动

  19. //鼠标点击停止或继续(如果不需要可以去掉下面的脚本)

  20. document.body.onmousedown = function(){

  21.     paused = !paused;

  22. }



  23. var speed1 = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)

  24. var offpos1 = 1; //每次向上偏移量,单位为像素(可修改)

  25. var tabledom1 = document.getElementById("GRID2"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)

  26. var bodydiv1 = document.getElementById("HHH3"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)

  27. bodydiv1.style.overflow="hidden";

  28. var position1 = 0;

  29. var height1 = tabledom1.clientHeight;

  30. var paused1 = false; //是否暂停

  31. function scroller1() {

  32. if( paused1) return;

  33. if((0 - position1 ) === height1 ){

  34. position1 = bodydiv.clientHeight;

  35. tabledom1.style.top = position1 + "px";

  36. }

  37. position1 -= offpos1;

  38. tabledom1.style.top = position1 + "px";

  39. }

  40.     setInterval("scroller1()", speed1);//自动滚动

  41. //鼠标点击停止或继续(如果不需要可以去掉下面的脚本)

  42. document.body.onmousedown = function(){

  43.     paused1 = !paused1;

  44. }





复制代码


9个回答

只看楼主

xxxl 数据领袖Lv6

发表于2020-8-19 09:58

只看该作者

取消 关注该作者的回复

沙发

您再命名一个新变量再给变量赋值元素id,再复制一遍代码以新变量为对象试试。您这里的代码tabledom、bodydiv变量被初始化了两次 只有第二次生效,也就是只作用再了第二次赋值的元素中。

Hannah 小试身手Lv3

发表于2020-8-19 10:01

只看该作者

取消 关注该作者的回复

板凳

xxxl 发表于 2020-8-19 09:58
您再命名一个新变量再给变量赋值元素id,再复制一遍代码以新变量为对象试试。您这里的代码tabledom、bodydi ...

您的意思是,如果想过要做到多个表同时走马灯,要写多个脚本,每个脚本对应一张表 是这样吗?

xxxl 数据领袖Lv6

发表于2020-8-19 10:03

只看该作者

取消 关注该作者的回复

地板

Hannah 发表于 2020-8-19 10:01
您的意思是,如果想过要做到多个表同时走马灯,要写多个脚本,每个脚本对应一张表 是这样吗? ...

是的

Hannah 小试身手Lv3

发表于2020-8-19 10:31

只看该作者

取消 关注该作者的回复

5#


代码小白{:3_44:}   麻烦您再帮我看一下,我写了两个脚本,还是只有第二个才能动。

var speed = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)                                                                                      
var offpos = 1; //每次向上偏移量,单位为像素(可修改)                                                                                                         
var tabledom = document.getElementById("GRID5"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)
var bodydiv = document.getElementById("HHH46"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)
bodydiv.style.overflow="hidden";                                                                                                                              
var position = 0;                                                                                                                                             
var height = tabledom.clientHeight;                                                                                                                           
var paused = false; //是否暂停                                                                                                                                
function scroller() {                                                                                                                                         
if( paused ) return;                                                                                                                                          
if((0 - position ) === height ){                                                                                                                              
position = bodydiv.clientHeight;                                                                                                                              
tabledom.style.top = position + "px";                                                                                                                        
}                                                                                                                                                            
position -= offpos;                                                                                                                                          
tabledom.style.top = position + "px";                                                                                                                        
}                                                                                                                                                            
    setInterval("scroller()", speed);//自动滚动                                                                                                               
//鼠标点击停止或继续(如果不需要可以去掉下面的脚本)                                                                                                            
document.body.onmousedown = function(){                                                                                                                       
    paused = !paused;                                                                                                                                         
}                                                                                                                                                            
   

var speed = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)                                                                                      
var offpos = 1; //每次向上偏移量,单位为像素(可修改)                                                                                                         
var tabledom1 = document.getElementById("GRID13"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)
var bodydiv1 = document.getElementById("HHH47"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)
bodydiv1.style.overflow="hidden";                                                                                                                              
var position = 0;                                                                                                                                             
var height = tabledom1.clientHeight;                                                                                                                           
var paused = false; //是否暂停                                                                                                                                
function scroller() {                                                                                                                                         
if( paused ) return;                                                                                                                                          
if((0 - position ) === height ){                                                                                                                              
position = bodydiv1.clientHeight;                                                                                                                              
tabledom1.style.top = position + "px";                                                                                                                        
}                                                                                                                                                            
position -= offpos;                                                                                                                                          
tabledom1.style.top = position + "px";                                                                                                                        
}                                                                                                                                                            
    setInterval("scroller()", speed);//自动滚动                                                                                                               
//鼠标点击停止或继续(如果不需要可以去掉下面的脚本)                                                                                                            
document.body.onmousedown = function(){                                                                                                                       
    paused = !paused;                                                                                                                                         
}                                                                                                                                                            
            

xxxl 数据领袖Lv6

发表于2020-8-19 10:43

只看该作者

取消 关注该作者的回复

6#

Hannah 发表于 2020-8-19 10:31
代码小白04.gif   麻烦您再帮我看一下,我写了两个脚本,还是只有第二个才能动。

var speed = 10; // ...

稍等一下  我本地试一下

Hannah 小试身手Lv3

发表于2020-8-19 10:49

只看该作者

取消 关注该作者的回复

7#

xxxl 发表于 2020-8-19 10:43
稍等一下  我本地试一下

这是导出的分析表,给您作为一个参考。
走马灯的效果是在tab页中实现的,同时tab标签页需要自动切换。(大屏的领导驾驶舱,分辨率较大)
分析表_20200819_104816.zip (354.02 KB, 下载次数: )

xxxl 数据领袖Lv6

发表于2020-8-19 09:45

只看该作者

取消 关注该作者的回复

8#

Hannah 发表于 2020-8-19 10:49
这是导出的分析表,给您作为一个参考。
走马灯的效果是在tab页中实现的,同时tab标签页需要自动切换。( ...

这是两个表格走马灯代码,加了1的就是要修改的变量,另外附件这个表样,文件中装入本地文件就可以使用 两个表格走马灯效果.rar (2.63 KB, 下载次数: )
  1. var speed = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)

  2. var offpos = 1; //每次向上偏移量,单位为像素(可修改)

  3. var tabledom = document.getElementById("GRID1"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)

  4. var bodydiv = document.getElementById("HHH2"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)

  5. bodydiv.style.overflow="hidden";

  6. var position = 0;

  7. var height = tabledom.clientHeight;

  8. var paused = false; //是否暂停

  9. function scroller() {

  10. if( paused ) return;

  11. if((0 - position ) === height ){

  12. position = bodydiv.clientHeight;

  13. tabledom.style.top = position + "px";

  14. }

  15. position -= offpos;

  16. tabledom.style.top = position + "px";

  17. }

  18.     setInterval("scroller()", speed);//自动滚动

  19. //鼠标点击停止或继续(如果不需要可以去掉下面的脚本)

  20. document.body.onmousedown = function(){

  21.     paused = !paused;

  22. }



  23. var speed1 = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)

  24. var offpos1 = 1; //每次向上偏移量,单位为像素(可修改)

  25. var tabledom1 = document.getElementById("GRID2"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)

  26. var bodydiv1 = document.getElementById("HHH3"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)

  27. bodydiv1.style.overflow="hidden";

  28. var position1 = 0;

  29. var height1 = tabledom1.clientHeight;

  30. var paused1 = false; //是否暂停

  31. function scroller1() {

  32. if( paused1) return;

  33. if((0 - position1 ) === height1 ){

  34. position1 = bodydiv.clientHeight;

  35. tabledom1.style.top = position1 + "px";

  36. }

  37. position1 -= offpos1;

  38. tabledom1.style.top = position1 + "px";

  39. }

  40.     setInterval("scroller1()", speed1);//自动滚动

  41. //鼠标点击停止或继续(如果不需要可以去掉下面的脚本)

  42. document.body.onmousedown = function(){

  43.     paused1 = !paused1;

  44. }





复制代码


Hannah 小试身手Lv3

发表于2020-8-19 11:14

只看该作者

取消 关注该作者的回复

9#

xxxl 发表于 2020-8-19 11:12
这是两个表格走马灯代码,加了1的就是要修改的变量,另外附件这个表样,文件中装入本地文件就可以使用

...

非常感谢您!辛苦了

xxxl 数据领袖Lv6

发表于2020-8-19 11:18

只看该作者

取消 关注该作者的回复

10#

Hannah 发表于 2020-8-19 11:14
非常感谢您!辛苦了

嗯嗯 不客气

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

400咨询:400-0011-866

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流

版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号