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

编辑
  • 文档创建者:yets11
  • 浏览次数:2860次
  • 编辑次数:9次
  • 最近更新:Kevin-s 于 2019-05-29
  • 1. 描述



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

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


    这种功能如何实现的呢?


    2. 思路


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


    3. 操作步骤



    3.1 修改模板


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



    3.2 添加倒计时控制功能


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


    代码如下:

    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%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\08-JS实现为控件添加倒计时功能.cpt

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

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

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