JS实现为控件添加倒计时功能
一.概述
在有些报表需求中，需要为控件添加倒计时功能，限制到某一个时间点后能进行一项操作或不能进行某项操作，比如查询，导出功能等等，又需要人性化地显示还有多少时间，即倒计时功能，比如下图中我们限制这个报表在每天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);
}
3.预览
最终效果如上图.
附件列表
主题： 二次开发
标签：
暂无标签