一.概述
在有些 報表 需求中，需要為控件添加倒計時功能，限制到某一個時間點后能進行一項操作或不能進行某項操作，比如查詢，導出功能等等，又需要人性化地顯示還有多少時間，即倒計時功能，比如下圖中我們限制這個報表在每天10點后才能查詢
當倒計時結束的時候，查詢功能可用
這種功能如何實現的呢
二.實現思路
主要原理是利用控件的setEnable(true)/setEnable(false)來進行設置控件的可用與不可用狀態，在獲取時間的過程中，需要利用到JS中的獲取時間，利用JS的定時器函數setInterval(function(){},time)來進行定時取得倒時時，并判斷倒計時是否結束。
三 .實現過程
1、修改模板
以自帶的gettingstarted.cpt模板為例，設置初始化時查詢按鈕不可用，如下圖
2、添加倒計時控制功能
為了簡化控制流程，把JS代碼直接寫在查詢按鈕的初始化后事件中，如下圖
代碼如下：
var h= 10 ; //限制幾點可查詢 var m= 00 ; //限制幾分可查詢 var s= 00 ; //限制幾秒可查詢 //格式化時間 function timeToString(a){ //小時 var s= '還有' s+=parseInt(a/ 3600 )+ '時' ; //分 s+=parseInt(a % 3600 / 60 )+ '分' ; //秒 s+=parseInt(a % 60 )+ '秒可查' ; return s; } var date1= new Date(); var date2= new Date(); //設置預置可查時間 date1.setHours(h); date1.setMinutes(m); date1.setSeconds(s); //比如時間 var d=(date1-date2)/ 1000 ; //如果初始化時可用，就啟用按鈕 if (d< 0 ){ this .setValue( '查詢' ); this .setEnable( true ); } else { var btn= this ; //顯示倒計時時間 btn.setValue(timeToString(d)); //設置不可用 btn.setEnable( false ); //定時器函數 setInterval(function(){ //重新設置時間 date1= new Date(); date2= new Date(); date1.setHours(h); date1.setMinutes(m); date1.setSeconds(s); //重新當前時間與設定時間的時間差 d=(date1-date2)/ 1000 ; if (d< 0 ){ btn.setValue( '查詢' ); btn.setEnable( true ); } else { btn.setValue(timeToString(d)); btn.setEnable( false ); } }, 1000 ); } 以上所述是小編給大家介紹的JavaScript在控件上添加倒計時功能的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
