這篇文章主要介紹“JavaScript怎么在控件上添加倒計時功能”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“JavaScript怎么在控件上添加倒計時功能”文章能幫助大家解決問題。

我們注重客戶提出的每個要求，我們充分考慮每一個細(xì)節(jié)，我們積極的做好成都網(wǎng)站建設(shè)、成都做網(wǎng)站服務(wù)，我們努力開拓更好的視野，通過不懈的努力，成都創(chuàng)新互聯(lián)贏得了業(yè)內(nèi)的良好聲譽(yù)，這一切，也不斷的激勵著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,成都微信小程序,網(wǎng)站開發(fā),技術(shù)開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。

一.概述

在有些 報表 需求中，需要為控件添加倒計時功能，限制到某一個時間點后能進(jìn)行一項操作或不能進(jìn)行某項操作，比如查詢，導(dǎo)出功能等等，又需要人性化地顯示還有多少時間，即倒計時功能，比如下圖中我們限制這個報表在每天10點后才能查詢 

當(dāng)?shù)褂嫊r結(jié)束的時候，查詢功能可用 

這種功能如何實現(xiàn)的呢

二.實現(xiàn)思路

主要原理是利用控件的setEnable(true)/setEnable(false)來進(jìn)行設(shè)置控件的可用與不可用狀態(tài)，在獲取時間的過程中，需要利用到JS中的獲取時間，利用JS的定時器函數(shù)setInterval(function(){},time)來進(jìn)行定時取得倒時時，并判斷倒計時是否結(jié)束。

三 .實現(xiàn)過程

1、修改模板

以自帶的gettingstarted.cpt模板為例，設(shè)置初始化時查詢按鈕不可用，如下圖  

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(); 
 //設(shè)置預(yù)置可查時間 
 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)); 
  //設(shè)置不可用 
  btn.setEnable( false );  
  //定時器函數(shù) 
  setInterval(function(){ 
   //重新設(shè)置時間 
   date1= new Date();  
   date2= new Date(); 
   date1.setHours(h); 
   date1.setMinutes(m); 
   date1.setSeconds(s); 
   //重新當(dāng)前時間與設(shè)定時間的時間差 
   d=(date1-date2)/ 1000 ; 
   if (d< 0 ){ 
   btn.setValue( '查詢' ); 
   btn.setEnable( true ); 
   } else {  
   btn.setValue(timeToString(d)); 
   btn.setEnable( false );  
   } 
  }, 1000 ); 
 }

關(guān)于“JavaScript怎么在控件上添加倒計時功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。