JS实现为控件添加倒计时功能

一.概述

在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个报表在每天10点后才能查询



当倒计时结束的时候,查询功能可用


这种功能如何实现的呢

二.实现思路

主要原理是利用控件的setEnable(true)/setEnable(false)来进行设置控件的可用与不可用状态,在获取时间的过程中,需要利用到JS中的获取时间,利用JS的定时器函数setInterval(function(){},time)来进行定时取得倒时时,并判断倒计时是否结束。


.实现过程

1、修改模板

以自带的gettingstarted.cpt模板为例,设置初始化时查询按钮不可用,如下图


2、添加倒计时控制功能

为了简化控制流程,把JS代码直接写在查询按钮的初始化后事件中,如下图


代码如下:

1. var h=10;//限制几点可查询  

2. var m=00;//限制几分可查询  

3. var s=00;//限制几秒可查询  

4. //格式化时间  

5. function timeToString(a){  

6.     //小时  

7.     var s='还有'  

8.     s+=parseInt(a/3600)+'时';  

9.     //分  

10.     s+=parseInt(a % 3600 /60)+'分';  

11.     //秒  

12.     s+=parseInt(a % 60)+'秒可查';  

13.     return s;  

14. }  

15. var date1=new Date();  

16. var date2=new Date();  

17. //设置预置可查时间  

18. date1.setHours(h);  

19. date1.setMinutes(m);  

20. date1.setSeconds(s);  

21. //比如时间  

22. var d=(date1-date2)/1000;  

23. //如果初始化时可用,就启用按钮  

24. if(d<0){  

25.     this.setValue('查询');  

26.     this.setEnable(true);  

27. else {      

28.     var btn=this;     

29.     //显示倒计时时间  

30.     btn.setValue(timeToString(d));  

31.     //设置不可用  

32.     btn.setEnable(false);     

33.     //定时器函数  

34.     setInterval(function(){  

35.         //重新设置时间  

36.         date1=new Date();     

37.         date2=new Date();  

38.         date1.setHours(h);  

39.         date1.setMinutes(m);  

40.         date1.setSeconds(s);  

41.         //重新当前时间与设定时间的时间差  

42.         d=(date1-date2)/1000;  

43.         if(d<0){  

44.         btn.setValue('查询');  

45.         btn.setEnable(true);  

46.         } else {      

47.         btn.setValue(timeToString(d));  

48.         btn.setEnable(false);     

49.         }  

50.     },1000);  

51. }  

3.预览

最终效果如上图.

  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值