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

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

当倒计时结束的时候,查询功能可用
 JS实现为控件添加倒计时功能

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

三.实现过程
1、修改模板
以自带的gettingstarted.cpt模板为例,设置初始化时查询按钮不可用,如下图
 JS实现为控件添加倒计时功能

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

最终效果如上图.

;