一.概述
在有些 報(bào)表 需求中，需要為控件添加倒計(jì)時(shí)功能，限制到某一個(gè)時(shí)間點(diǎn)后能進(jìn)行一項(xiàng)操作或不能進(jìn)行某項(xiàng)操作，比如查詢，導(dǎo)出功能等等，又需要人性化地顯示還有多少時(shí)間，即倒計(jì)時(shí)功能，比如下圖中我們限制這個(gè)報(bào)表在每天10點(diǎn)后才能查詢
當(dāng)?shù)褂?jì)時(shí)結(jié)束的時(shí)候，查詢功能可用
這種功能如何實(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í)查詢按鈕不可用，如下圖
2、添加倒計(jì)時(shí)控制功能
為了簡(jiǎn)化控制流程，把JS代碼直接寫(xiě)在查詢按鈕的初始化后事件中，如下圖
代碼如下：
var h= 10 ; //限制幾點(diǎn)可查詢 var m= 00 ; //限制幾分可查詢 var s= 00 ; //限制幾秒可查詢 //格式化時(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( '查詢' ); 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( '查詢' ); btn.setEnable( true ); } else { btn.setValue(timeToString(d)); btn.setEnable( false ); } }, 1000 ); } 以上所述是小編給大家介紹的JavaScript在控件上添加倒計(jì)時(shí)功能的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
