JS实现为控件添加倒计时功能

编辑
文档创建者:yets11 (67190 )     浏览次数:1905次     编辑次数:8次     最近更新:ukae 于 2018-08-07     

目录:

1. 描述编辑

在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个报表在每天17点50分后才能查询:

222

当倒计时结束的时候,查询功能可用:

222

这种功能如何实现的呢?

2. 思路编辑

主要原理是利用控件的setEnable(true)/setEnable(false)来进行设置控件的可用与不可用状态,在获取时间的过程中,需要利用到JS中的获取时间,利用JS的定时器函数setInterval(function(){},time)来进行定时取得倒时时,并判断倒计时是否结束。

3. 操作步骤编辑

3.1 修改模板

以自带的gettingstarted.cpt模板为例,设置初始化时查询按钮不可用,如下图:

222

3.2 添加倒计时控制功能

为了简化控制流程,把JS代码直接写在查询按钮的初始化后事件中,如下图:

222

代码如下:

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端预览效果

222

222

注:不支持移动端。

5. 已完成模板编辑

模板效果在线查看请点击:JS实现为控件添加倒计时功能.cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\08-JS实现为控件添加倒计时功能.cpt

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]