如何動態改變Xpage中的風格？其實我想眨眼不同顏色的標籤？

Question

吐溫在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> 

Answer 1

好吧，我現在好多了（對不起）理解這個問題，但是這是因爲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> 

Answer 2

也許不是嘗試使用道場：

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

和

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

Answer 3

您的代碼工作正常，所以必須要打破你的腳本一些其他的代碼。 我已將此添加到新的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> 

Answer 4

這是沒有提示的工作。之所以你的腳本不工作，是因爲在完成之前，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>