如何动态更改Xpage中的样式???实际上,我想眨眼具有不同颜色的标签吗?
-
26-10-2019 - |
题
补间没有在Xpages中工作,我已经使用了 setTimeOut
延迟功能。
但是,这不是我关注的问题。 alert
在使用时正在工作并延迟 setTimeOut
功能。但是风格的改变行不通...实际上,该动作的最后实例仅在起作用
我使用的代码是。
var t = 1;
var flag;
function doMove() {
alert("Hi");
t = t + 1;
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
flag = test()
}
else {
document.getElementById("#{id:label1}").style.color = "red";
flag = test()
}
}
function test() {
var startTime = new Date().getTime();
while (new Date().getTime() < startTime + 1000);
return true;
}
for (var l = 0; l <= 2; l++) {
doMove();
}
XSP :
Please see the following
<xp:label value="Testing" id="label1" style="font-weight:bold;font- size:14pt;color:rgb(255,0,0)">
</xp:label>
<xp:button value="Dojo" id="button3">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[
var t = 1;
var flag;
function doMove() {
alert("Hi");
t = t + 1;
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
flag = test()
}
else {
document.getElementById("#{id:label1}").style.color = "red";
flag = test()
}
}
function test() {
var startTime = new Date().getTime();
while (new Date().getTime() < startTime + 1000);
return true;
}
for (var l = 0; l <= 2; l++) {
doMove();
}
]]></xp:this.script>
</xp:eventHandler>
</xp:button>
解决方案
好的,我现在更好地理解问题(抱歉),但这是因为循环。完成所有循环后,浏览器会更新接口。我已经花了一些时间来提出此代码。使用最大变量,您将设置它将闪烁文本的次数。我希望这能解决这个问题。
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" createForm="false">
<xp:label value="Label" id="label1"></xp:label>
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var t = 1;
var flag;
var max = 5;
function doMove() {
t = t + 1;
if (t > max){
return;
}
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
flag = setTimeout(doMove, 1000);
}
else {
document.getElementById("#{id:label1}").style.color = "red";
flag = setTimeout(doMove, 1000);
}
}
doMove();
]]></xp:this.script>
</xp:eventHandler>
</xp:view>
其他提示
也许尝试使用Dojo:
dojo.style("#{id:label1}", "color", "blue");
和
dojo.style("#{id:label1}", "color", "red");
您的代码工作正常,因此必须是其他代码打破脚本的代码。我已经将其添加到新的Xpage中,它闪烁着红色和蓝色!
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:label value="Label" id="label1"></xp:label>
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var t = 1;
var flag;
function doMove() {
alert("Hi");
t = t + 1;
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
flag = test()
}
else {
document.getElementById("#{id:label1}").style.color = "red";
flag = test()
}
}
function test() {
var startTime = new Date().getTime();
while (new Date().getTime() < startTime + 1000);
return true;
}
for (var l = 0; l <= 2; l++) {
doMove();
}]]></xp:this.script>
</xp:eventHandler></xp:view>
这是无警报的工作。您的脚本无法正常工作的原因,因为遗嘱循环在完成之前会阻止用户界面。看起来它什么也没做,但是这样做了。您可以通过在HTML页面中添加新元素来自己测试。脚本之后,您将看到用户界面刷新时添加多个元素。
您应该真正使用Settimeout函数来工作:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" createForm="false">
<xp:label value="Label" id="label1"></xp:label>
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var t = 1;
var flag;
function doMove() {
t = t + 1;
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
flag = setTimeout(doMove, 1000);
}
else {
document.getElementById("#{id:label1}").style.color = "red";
flag = setTimeout(doMove, 1000);
}
}
for (var l = 0; l <= 2; l++) {
doMove();
}
]]></xp:this.script>
</xp:eventHandler>
</xp:view>
不隶属于 StackOverflow