如何在Xpage中动态更改样式???事实上，我想眨眼一个不同颜色的标签

How to dynamically change the style in Xpage??? Actually I want to blink a label with different color?

本文关键字：一个 标签 颜色 动态 Xpage 事实上 样式      更新时间：2023-09-26

Tween在Xpages中不工作，我使用了setTimeOut函数进行延迟
但就我而言，这并不奏效。CCD_ 2在使用CCD_。但改变风格是行不通的。。。实际上行动的最后一个实例只起作用

我使用的代码是.

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>

也许可以尝试使用Dojo:

dojo.style("#{id:label1}", "color", "blue");

和

dojo.style("#{id:label1}", "color", "red");

好的，我现在更好地理解了这个问题（抱歉），但这是因为for循环。完成所有循环后，浏览器会更新界面。我在这方面花了一些时间，并想出了这个代码。使用最大变量，您将设置文本闪烁的次数。我希望这能解决问题。

<?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>

您的代码运行良好，因此一定是其他代码破坏了您的脚本。我把它添加到了一个新的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>

这在没有警报的情况下工作。您的脚本无法工作的原因是will循环会阻塞用户界面，直到它完成为止。看起来它什么都没做，但它确实做了。您可以通过在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>
相关文章：