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>