JS怎么实现定时切换报表块背景图片?做到图片切换后又恢复原图。

微信图片_20230216225933.png

FineReport 两千乱渣 发布于 2023-2-16 23:01
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共2回答
最佳回答
0
两千乱渣Lv6见习互助
发布于2023-2-17 14:50(编辑于 2023-2-17 14:55)

//先给六个报表块赋予蓝色背景图片

  $(".content-container div[widgetname='REPORT0001']").css({

'background': 'url(/webroot/help/icon/001.png)no-repeat',

'background-size': '100% 100%'

});

   $(".content-container div[widgetname='REPORT0002']").css({

'background': 'url(/webroot/help/icon/002.png)no-repeat',

'background-size': '100% 100%'

});

    $(".content-container div[widgetname='REPORT0003']").css({

'background': 'url(/webroot/help/icon/003.png)no-repeat',

'background-size': '100% 100%'

});

     $(".content-container div[widgetname='REPORT0004']").css({

'background': 'url(/webroot/help/icon/004.png)no-repeat',

'background-size': '100% 100%'

});

      $(".content-container div[widgetname='REPORT0005']").css({

'background': 'url(/webroot/help/icon/005.png)no-repeat',

'background-size': '100% 100%'

});

       $(".content-container div[widgetname='REPORT0006']").css({

'background': 'url(/webroot/help/icon/006.png)no-repeat',

'background-size': '100% 100%'

});

//开启每秒定时任务

 setInterval(function(){

//获取秒数

 var M = FR.remoteEvaluate('FORMAT(now(),"ss")');

 //判断等于 0或30s时执行

 if(M == 0 || M == 30 ){

//切换黄色背景图片

 $(".content-container div[widgetname='REPORT0001']").css({

'background': 'url(/webroot/help/icon/01.png)no-repeat',

'background-size': '100% 100%'

});

//开启延迟执行任务

setTimeout(function(){

  //四秒后换会原来蓝色背景图片

 $(".content-container div[widgetname='REPORT0001']").css({

'background': 'url(/webroot/help/icon/001.png)no-repeat',

'background-size': '100% 100%'

});

     

}, 4000);

};

//同上

 if(M == 5 || M == 35 ){

 $(".content-container div[widgetname='REPORT0002']").css({

'background': 'url(/webroot/help/icon/02.png)no-repeat',

'background-size': '100% 100%'

});

setTimeout(function(){

      

 $(".content-container div[widgetname='REPORT0002']").css({

'background': 'url(/webroot/help/icon/002.png)no-repeat',

'background-size': '100% 100%'

});

     

}, 4000);

};

 if(M == 10 || M == 40 ){

 $(".content-container div[widgetname='REPORT0003']").css({

'background': 'url(/webroot/help/icon/03.png)no-repeat',

'background-size': '100% 100%'

});

setTimeout(function(){

      

 $(".content-container div[widgetname='REPORT0003']").css({

'background': 'url(/webroot/help/icon/003.png)no-repeat',

'background-size': '100% 100%'

});

     

}, 4000);

};

 if(M == 15 || M == 45 ){

 $(".content-container div[widgetname='REPORT0004']").css({

'background': 'url(/webroot/help/icon/04.png)no-repeat',

'background-size': '100% 100%'

});

setTimeout(function(){

      

 $(".content-container div[widgetname='REPORT0004']").css({

'background': 'url(/webroot/help/icon/004.png)no-repeat',

'background-size': '100% 100%'

});

     

}, 4000);

};

 if(M == 20 || M == 50 ){

 $(".content-container div[widgetname='REPORT0005']").css({

'background': 'url(/webroot/help/icon/05.png)no-repeat',

'background-size': '100% 100%'

});

setTimeout(function(){

      

 $(".content-container div[widgetname='REPORT0005']").css({

'background': 'url(/webroot/help/icon/005.png)no-repeat',

'background-size': '100% 100%'

});

     

}, 4000);

};

 if(M == 25 || M == 55 ){

 $(".content-container div[widgetname='REPORT0006']").css({

'background': 'url(/webroot/help/icon/06.png)no-repeat',

'background-size': '100% 100%'

});

setTimeout(function(){

      

 $(".content-container div[widgetname='REPORT0006']").css({

'background': 'url(/webroot/help/icon/006.png)no-repeat',

'background-size': '100% 100%'

});

     

}, 4000);

};

}, 1000);

//这个会只有一个定时器,但是图片切换会失真,求大神指教

----------------------------------------------------------------------------------------------

//获取当前报表块属性

var el = this.element.children();

//默认图片

  el.css({

  'background': 'url(/webroot/help/icon/001.png)no-repeat',

  'background-size': '100% 100%'

});

//每秒执行

setInterval(function(){

//获取现在秒数

var M = FR.remoteEvaluate('FORMAT(now(),"ss")');

//判断秒数等于0s或30s时执行切换图片

if(M == 0 || M == 30 ){

el.css({

  'background': 'url(/webroot/help/icon/01.png)no-repeat',

  'background-size': '100% 100%'

});

//延迟执行4秒切换为原来图片

setTimeout(function(){

      

el.css({

  'background': 'url(/webroot/help/icon/001.png)no-repeat',

  'background-size': '100% 100%'

});

     

}, 4000);

}

}, 1000);

//这串需要给六个报表块都加上,六个独立执行,会导致又些卡顿。好处是图片不会失真!

最佳回答
0
snrtuemcLv8专家互助
发布于2023-2-17 07:53

下面给了一个简单例子,报表块初始化事件定时任务,修改变量,if判断切换背景图

var a=1;

setInterval(function() {

     if(a=="1"){

$(".content-container div[widgetname='REPORT0']").css({

'background': 'url(/webroot/help/picture/icon_top1.png)no-repeat',

'background-size': '100% 100%'

});

      a=2;

     }

if(a=="2"){

$(".content-container div[widgetname='REPORT0']").css({

'background': 'url(/webroot/help/picture/icon_top2.png)no-repeat',

'background-size': '100% 100%'

});

      a=3;

     }

if(a=="3"){

$(".content-container div[widgetname='REPORT0']").css({

'background': 'url(/webroot/help/picture/icon_top3.png)no-repeat',

'background-size': '100% 100%'

});

      a=1;

     }

}, 5000);

  • 0关注人数
  • 491浏览人数
  • 最后回答于:2023-2-17 14:55
    请选择关闭问题的原因
    确定 取消
    返回顶部