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

编辑
  • 文档创建者:yets11
  • 浏览次数:3591次
  • 编辑次数:12次
  • 最近更新:Kevin-s 于 2019-11-19
  • 1. 概述

    1.1 问题描述

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

    222

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

    222

    这种功能如何实现的呢?


    1.2 实现思路

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


    2. 操作步骤

    2.1 修改模板

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

    image.png

    2.2 添加倒计时控制功能

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

    image.png

    代码如下:

    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);
    }

    2.3 预览效果

    保存模板,点击分页预览,PC 端效果如下所示:

    222

    222

    注:不支持移动端。

    3. 模板下载

    模板效果在线查看请点击:JS 实现为控件添加倒计时功能.cpt

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

    点击下载模板:08-JS实现为控件添加倒计时功能.cpt


    附件列表


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

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

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