Dojo工具包 - 如何在點擊按鈕時連續觸發n事件

我是使用dojo工具包的初學者，我試圖創建一個鬧鈴，當按下按鈕時屏幕會不斷閃爍紅色，並且只在按下按鈕時停止再次。我已經能夠改變背景顏色一次，但我不知道如何使它在紅色或無背景顏色之間連續觸發。Dojo工具包 - 如何在點擊按鈕時連續觸發n事件

這裏是表我的HTML文件：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 

     <link rel="stylesheet" type="text/css" href="alarm.css" /> 
     <!-- load Dojo --> 
     <script>dojoConfig = {parseOnLoad: true}</script> 
     <script src="dojo/dojo.js" data-dojo-config="async: true"></script> 
     <script> require(['myModule.js']); </script> 

     <title>Alarm test</title> 

    </head> 

    <body class="claro"> 
     <h1 id="greeting">Alarm test</h1> 

    <table data-dojo-type="dojox.grid.DataGrid" id="tableContainer"> 
     <thead> 
      <tr> 
       <th field="col1">Company</th> 
       <th field="col2">Contact</th> 
       <th field="col3">Country</th> 
      </tr> 
      <tr> 
       <td>Alfreds Futterkiste</td> 
       <td>Maria Anders</td> 
       <td>Germany</td> 
      </tr> 
      <tr> 
       <td>Centro comercial Moctezuma</td> 
       <td>Francisco Chang</td> 
       <td>Mexico</td> 
      </tr> 
     </thead> 
    </table> 

    <button id="progButtonNode" type="button"></button>   
    </body> 
</html>

這裏是我的按鈕（）事件處理程序，一旦更改背景：

require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/domReady!"], 
function(style, dom, on){ 
    on(dom.byId("progButtonNode"), "click", function(){  
     style.set("tableContainer", { 
     backgroundColor: "red" 
    }); 
    }); 
});

這裏是我的表的CSS。我對此有另一個問題;我怎樣才能使用代碼覆蓋一個CSS？因爲當我改變背景顏色只適用於行不已經有一個背景顏色設置是這樣的：http://imgur.com/rsCN8Vx

table, th, td { 
    border: 1px solid black; 
} 

table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 

td, th { 
    border: 1px solid #dddddd; 
    text-align: left; 
    padding: 8px; 
} 

tr:nth-child(even) { 
    background-color: #dddddd; 
}

來源

2017-08-15 nanj

這裏這段代碼：

function(style, dom, on){ 
    on(dom.byId("progButtonNode"), "click", function(){  
     style.set("tableContainer", { 
     backgroundColor: "red" 
    }); 
    }); 
});

可以改爲試試這個：

function(style, dom, on){ 
    on(dom.byId("progButtonNode"), "click", function(){  
     class.set("tableContainer", { 
     "blink" // or however you add a class in dojo, not sure 
    }); 
    }); 
});

和你css看起來像這樣

.blink { 
    animation:blink 700ms infinite alternate; 
} 

@keyframes blink { 
    from { background-color: white; } 
    to { background-color: red; } 
};

在dojo中，應該有一個類似於jQuery的類易於toggle。如果沒有，只需添加一個條件來檢查該類是否在那裏。如果是，請移除類別blink，效果將消失。

來源

2017-08-15 22:03:40

這樣做的一個更簡單的方法是

/*js*/ 
require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/dom-class", "dojo/domReady!"], 
function(style, dom, on, domClass) { 
    var blink; 
    on(dom.byId("progButtonNode"), "click", function() {  
     if(blink) { 
      clearInterval(blink); 
      blink = null; 
     } else { 
      blink = setInterval(function() { 
       domClass.toggle("tableContainer", "background"); 
      }, 1000); // 1 second 
     } 
    }); 
});

這個類添加到您的css文件

/*css*/ 
.background { 
    background-color: red; 
}

來源

2017-08-31 08:50:23

Dojo工具包 - 如何在點擊按鈕時連續觸發n事件

回答

相關問題