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.预览

最终效果如上图.

本文首发CSDN：http://blog.csdn.net/szd_happy/article/details/74295088