JS实现为控件添加倒计时功能
1. 描述
在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个报表在每天17点50分后才能查询:
2. 思路
主要原理是利用控件的setEnable(true)/setEnable(false)来进行设置控件的可用与不可用状态,在获取时间的过程中,需要利用到JS中的获取时间,利用JS的定时器函数setInterval(function(){},time)来进行定时取得倒时时,并判断倒计时是否结束。
3. 操作步骤
3.1 修改模板
以自带的gettingstarted.cpt模板为例,设置初始化时查询按钮不可用,如下图:
3.2 添加倒计时控制功能
为了简化控制流程,把JS代码直接写在查询按钮的初始化后事件中,如下图:
var h = 17; //限制几点可查询
var m = 50; //限制几分可查询
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);
}
4. 预览效果
4.1 PC端预览效果
注:不支持移动端。
5. 已完成模板
模板效果在线查看请点击:JS实现为控件添加倒计时功能.cpt
已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\参数界面JS实例\08-JS实现为控件添加倒计时功能.cpt
附件列表
标签:
9.0验证
文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201)