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
JS實現為控件添加倒計時功能