javascript - CSS/JavaScript 通过在文本更​​改时更改颜色来突出显示文本

Question

我有一个 JavaScript 可以更新 <p>根据 ajax 调用的返回值，每隔几秒生成 html。我想在 <p> 上添加一个不错的效果这样每当 html 里面 <p>变化，背景的<p>更改为其他颜色一秒钟，然后再更改回来。

它类似于雅虎财经页面显示股票当前价格的方式。 - 例如 https://finance.yahoo.com/quote/BABA?p=BABA

我如何实现这样的目标，最好是使用 CSS？

到目前为止，我已经尝试了以下方法。

<script>
setInterval(function () {
               $("#bid").html(Math.random()).addClass('textColor').delay(1000).removeClass('textColor');
}, 1000);
</script>

和 CSS

<style>
        .textColor {
            background-color: coral;
        }

    </style>

和 HTML

<p id="bid"></p>

看起来效果太快了，所以颜色变化都看不出来。

https://jsfiddle.net/yn5gq1wd/1/

更新:

这是最新的 jsfiddle https://jsfiddle.net/yn5gq1wd/19/

Answer 1

创建一个 css 类，其中包含您要将其更改为的背景颜色。

当段落中的html发生变化时，将css类添加到段落中，然后在设定的时间(以毫秒为单位)后使用setTimeout()方法移除该类。

下面是一个使用 setTimeout 在点击段落时添加和删除类的示例。您只需将点击事件替换为其他事件即可触发代码。

<script>
    $("#bid").click(function() {
        $("#bid").addClass('textColor');

        setTimeout(function() {
            $("#bid").removeClass('textColor');
        }, 1000);
    })
</script>