如何在jQuery中实现股票价格刷新并与上次数据对比？

我帮你调整了代码，加入价格对比逻辑和针对性的闪烁动画，完美实现你要的功能，以下是完整实现：

<style>
/* 定义闪烁动画效果 */
@keyframes flash {
  0%, 100% { background-color: transparent; }
  50% { background-color: #ffffcc; } /* 浅黄背景闪烁，可自定义颜色 */
}

/* 触发闪烁的类 */
.flash-effect {
  animation: flash 1s ease-in-out 2; /* 1秒一个周期，闪烁2次 */
}
</style>

<div class="stockname">microsoft</div>
<div class="stockprice">1000</div>
<div class="stockname">yahoo</div>
<div class="stockprice">300</div>
<div class="stockname">google</div>
<div class="stockprice">800</div>
<div class="stockname">facebook</div>
<div class="stockprice">600</div>

<script src="/assets/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script language="javascript">
$(function() {
  // 初始化：把每个股票的初始价格存储到元素的data属性中
  $(".stockprice").each(function() {
    $(this).data("oldPrice", $(this).text().trim());
  });

  function startRefresh() {
    // 异步加载新价格，在回调里处理对比逻辑
    $(".stockprice").load(location.href + " .stockprice", function(response, status) {
      if (status === "success") {
        // 遍历每个价格元素，对比新旧价格
        $(".stockprice").each(function() {
          const newPrice = $(this).text().trim();
          const oldPrice = $(this).data("oldPrice");

          if (newPrice !== oldPrice) {
            // 价格变动：添加闪烁动画
            $(this).addClass("flash-effect");
            // 更新存储的旧价格
            $(this).data("oldPrice", newPrice);
            // 动画结束后移除类，避免下次刷新冲突
            setTimeout(() => {
              $(this).removeClass("flash-effect");
            }, 2000); // 对应动画总时长2秒
          }
        });
      }
    });
  }

  // 首次执行刷新，之后每10秒重复一次
  startRefresh();
  setInterval(startRefresh, 10000);
});
</script>

关键改动说明： #

• 自定义闪烁动画：通过CSS @keyframes定义闪烁效果，你可以轻松修改颜色、闪烁次数或切换成边框/文字变色等效果。
• 存储旧价格：页面加载时把初始价格存在元素的data-oldPrice属性里，作为后续对比的基准。
• 异步回调处理：load是异步方法，必须在回调中处理价格对比，确保拿到新数据后再执行逻辑。
• 针对性动画触发：只有价格变动的元素才会闪烁，避免无意义的全局动画干扰。
• 移除全局fade效果：替换为精准的变动反馈，更符合需求场景。

内容的提问来源于stack exchange，提问作者yupang