我希望有一个倒数计时器(很像 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>
最佳答案
将 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 <span id="time">05:00</span> 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>
关于javascript - xPages 倒数计时器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30656629/