JavaScript如何在控件上添加倒計(jì)時(shí)功能

這篇文章主要介紹了JavaScript如何在控件上添加倒計(jì)時(shí)功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一.概述

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

當(dāng)?shù)褂?jì)時(shí)結(jié)束的時(shí)候，查詢(xún)功能可用 

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

二.實(shí)現(xiàn)思路

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

三 .實(shí)現(xiàn)過(guò)程

1、修改模板

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

2、添加倒計(jì)時(shí)控制功能

為了簡(jiǎn)化控制流程，把JS代碼直接寫(xiě)在查詢(xún)按鈕的初始化后事件中，如下圖

代碼如下：

 var h= 10 ; //限制幾點(diǎn)可查詢(xún) 
 var m= 00 ; //限制幾分可查詢(xún) 
 var s= 00 ; //限制幾秒可查詢(xún) 
 //格式化時(shí)間 
 function timeToString(a){ 
  //小時(shí) 
  var s= '還有' 
  s+=parseInt(a/ 3600 )+ '時(shí)' ; 
  //分 
  s+=parseInt(a % 3600 / 60 )+ '分' ; 
  //秒 
  s+=parseInt(a % 60 )+ '秒可查' ; 
  return s; 
 } 
 var date1= new Date(); 
 var date2= new Date(); 
 //設(shè)置預(yù)置可查時(shí)間 
 date1.setHours(h); 
 date1.setMinutes(m); 
 date1.setSeconds(s); 
 //比如時(shí)間 
 var d=(date1-date2)/ 1000 ; 
 //如果初始化時(shí)可用，就啟用按鈕 
 if (d< 0 ){ 
  this .setValue( '查詢(xún)' ); 
  this .setEnable( true ); 
 } else {  
  var btn= this ;  
  //顯示倒計(jì)時(shí)時(shí)間 
  btn.setValue(timeToString(d)); 
  //設(shè)置不可用 
  btn.setEnable( false );  
  //定時(shí)器函數(shù) 
  setInterval(function(){ 
   //重新設(shè)置時(shí)間 
   date1= new Date();  
   date2= new Date(); 
   date1.setHours(h); 
   date1.setMinutes(m); 
   date1.setSeconds(s); 
   //重新當(dāng)前時(shí)間與設(shè)定時(shí)間的時(shí)間差 
   d=(date1-date2)/ 1000 ; 
   if (d< 0 ){ 
   btn.setValue( '查詢(xún)' ); 
   btn.setEnable( true ); 
   } else {  
   btn.setValue(timeToString(d)); 
   btn.setEnable( false );  
   } 
  }, 1000 ); 
 }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript如何在控件上添加倒計(jì)時(shí)功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!