我有一个动态表,并设置条件,使表行背景颜色根据时间比较更改.我想添加第二个逻辑,如果单元格不匹配,将使表格行每2秒闪烁/闪烁一次.我知道我需要创建“Flash / Blink”功能,但如何将该功能集成到我的逻辑中？
for (i = 0; i < rows.length; i++) {
cells = rows[i].getElementsByTagName('td');
if (cells[10].innerText != cells[11].innterText) {
rows[i].className = "blink/Flash";
}
}
解决方法
看吧,没有JavaScript！
HTML
<table>
<tr>
<td>true</td>
<td class="invalid">false</td>
<td>true</td>
<td>true</td>
</tr>
</table>
CSS
@-webkit-keyframes invalid {
from { background-color: red; }
to { background-color: inherit; }
}
@-moz-keyframes invalid {
from { background-color: red; }
to { background-color: inherit; }
}
@-o-keyframes invalid {
from { background-color: red; }
to { background-color: inherit; }
}
@keyframes invalid {
from { background-color: red; }
to { background-color: inherit; }
}
.invalid {
-webkit-animation: invalid 1s infinite; /* Safari 4+ */
-moz-animation: invalid 1s infinite; /* Fx 5+ */
-o-animation: invalid 1s infinite; /* Opera 12+ */
animation: invalid 1s infinite; /* IE 10+ */
}
现场演示
http://jsfiddle.net/bikeshedder/essxz/
对于那些被迫使用过时浏览器的可怜灵魂
CSS
.invalid-blink {
background-color: red;
}
JavaScript的
$(function() {
var on = false;
window.setInterval(function() {
on = !on;
if (on) {
$('.invalid').addClass('invalid-blink')
} else {
$('.invalid-blink').removeClass('invalid-blink')
}
},2000);
});
现场演示
