javascript – 闪烁表行

我有一个动态表,并设置条件,使表行背景颜色根据时间比较更改.我想添加第二个逻辑,如果单元格不匹配,将使表格行每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);
});

现场演示

http://jsfiddle.net/bikeshedder/SMwAn/

javascript – 闪烁表行

解决方法

猜你在找的JavaScript相关文章