我是使用 dojo 工具包的初学者，我正在尝试创建一个警报，当按下按钮时屏幕会连续闪烁红色，并且仅在再次按下按钮时停止。我已经能够更改一次背景颜色，但我不知道如何让它在红色或无背景颜色之间连续触发。
这是我的带有表格的 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>
这是我的按钮 on() 事件处理程序，用于更改一次背景:
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;
}
最佳答案
这里的代码:
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 的易于切换 的类。如果没有，只需添加一个条件来检查类是否存在。如果是，删除 blink 类，效果就会消失。
关于javascript - Dojo Toolkit - 如何在按钮单击时连续触发 n 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45702108/