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

10年積累的網站建設、網站制作經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計后付款的網站建設流程，更有涿鹿免費網站建設讓你可以放心的選擇與我們合作。

一.概述

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

當倒計時結束的時候，查詢功能可用 

這種功能如何實現的呢

二.實現思路

主要原理是利用控件的setEnable(true)/setEnable(false)來進行設置控件的可用與不可用狀態(tài)，在獲取時間的過程中，需要利用到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如何在控件上添加倒計時功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯，關注創(chuàng)新互聯行業(yè)資訊頻道，更多相關知識等著你來學習!

本文名稱：JavaScript如何在控件上添加倒計時功能
網頁鏈接：http://www.chinadenli.net/article36/gcipsg.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站策劃、網站營銷、外貿建站、做網站、營銷型網站建設、網站收錄

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯