xPages倒计时计时器

Question

我想要一个倒计时器（类似于像Ticketek这样的预订机构网站使用的），以便用户知道我们将保留预订10分钟，他们最好赶紧填写表格！

我对如何将其他JavaScript合并到xPage中有一些知识盲区。我会感激任何帮助。

我的计划基本上如下：

• 加载页面。
• 从10:00到0:00运行倒计时器。
• 在0:00时，转到新页面并丢失所有输入的数据。

为了实现这一点，我参考了这篇stackoverflow帖子中的顶部答案（The simplest possible JavaScript countdown timer?），并尝试在xPage中使用它。

我已经将此代码按原样合并到xPage中（因此不起作用），希望它能起作用，然后将其更改为使用计算字段控件。 我将其保留为原样，希望有人可以指导我哪里存在误解？

任何指向我出错的地方，或者如何最好使这样的控件正常工作的指针？

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.afterPageLoad>
        <xp:executeScript>
            <xp:this.script><![CDATA[#{javascript:function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

 var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);}]]></xp:this.script>
        </xp:executeScript>
    </xp:this.afterPageLoad>
    <div>
        Please complete in <span id="time">05:00</span>minutes.
</div>
</xp:view>

- atom

Answer 1

将CSJS代码放入onClientLoad事件中。更改一些内容后，现在它可以正常工作：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:eventHandler
        event="onClientLoad"
        submit="false">
        <xp:this.script><![CDATA[
function startTimer(duration, display) {
    var timer = duration;
    setInterval(function () {
        if (--timer <= 0) {
            window.location="http://www.google.de";
        }
        var minutes = parseInt(timer / 60, 10);
        var seconds = parseInt(timer % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.innerHTML = minutes + ":" + seconds;
    }, 1000);
}

var fiveMinutes = 60 * 5;
var display = document.getElementById("time");
startTimer(fiveMinutes, display);
]]></xp:this.script>
    </xp:eventHandler>
    <div>
        Please complete in&#160;<span id="time">05:00</span>&#160;minutes.
    </div>
</xp:view>

如果您需要在XPage中的某个时间点清理一些内容，那么可以创建一个面板，在时间到期时进行部分刷新：

    ...
    if (--timer <= 0) {
        XSP.partialRefreshPost("#{id:timeIsUp}", {params: {timeIsUp: "timeIsUp"}});
    }
    ...

<xp:panel id="timeIsUp">
    <xp:this.rendered><![CDATA[#{javascript: 
        if (param.timeIsUp <== null) {
            ' clean your data
            context.redirectToPage('tooLate')
        };
        true
    }]]></xp:this.rendered>
</xp:panel>

- Knut Herrmann

---

谢谢你，Knut——这极大地帮助了我的理解。 - atom

Knut，在 if 条件 param.timeIsUp <== null 中是正确的吗？难道不应该是 param.timeIsUp != null 吗？ - Marcus Loza