如何使用JS实现div宽度周期性动态变化？温度条场景求助

我来帮你排查代码里的问题，然后给出符合需求的可行方案：

原代码存在的问题 #

• 定时器嵌套调用错误：你在setInterval内部又调用了refreshTemperature()，这会导致每次刷新都创建新的定时器，最终页面会出现刷新频率越来越高、性能急剧下降的问题
• DOM操作语法错误：$(document).getElementById('temperatureBar')是错误的写法——jQuery对象并没有getElementById方法，应该选择用原生DOM方法或者jQuery的API来操作样式
• 随机值生成逻辑错误：width变量只在函数初始化时生成一次，后续定时器触发时不会生成新的随机宽度，温度条不会真正“动态变化”
• 缺少温度颜色渐变逻辑：原代码没有实现需求中“绿色→黄色→红色”的温度刻度对应效果

修复后的完整实现代码 #

HTML部分

我们可以给温度条加一个父容器来展示渐变背景刻度，让视觉效果更清晰：

<div id="temperatureContainer" style="width: 300px; height: 20px; border: 1px solid #ccc; background: linear-gradient(to right, #00ff00, #ffff00, #ff0000);">
  <div id="temperatureBar" style="height: 100%; background-color: rgba(0,0,0,0.7);"></div>
</div>

JavaScript（jQuery）部分

function refreshTemperature() {
  // 定时器只创建一次，避免重复嵌套
  setInterval(function () {
    // 在定时器内部生成新的随机宽度（1-100%，对应容器宽度的比例）
    var widthPercent = Math.random() * 99 + 1;
    // 使用jQuery的css方法直接设置宽度，语法更简洁
    $('#temperatureBar').fadeOut('slow', function() {
      // 在淡出完成后更新宽度，再执行淡入，动画更流畅
      $(this).css('width', widthPercent + '%').fadeIn('slow');
      
      // 额外：根据宽度比例动态调整温度条的颜色（强化温度视觉反馈）
      var red, green;
      if (widthPercent <= 33) {
        // 绿色区间：0-33%，绿色从255降到127，红色从0升到127
        green = 255 - Math.floor((widthPercent / 33) * 128);
        red = Math.floor((widthPercent / 33) * 128);
      } else if (widthPercent <= 66) {
        // 黄色区间：33-66%，绿色从127降到0，红色从127升到255
        green = 127 - Math.floor(((widthPercent - 33) / 33) * 127);
        red = 127 + Math.floor(((widthPercent - 33) / 33) * 128);
      } else {
        // 红色区间：66-100%，红色保持255，绿色保持0
        red = 255;
        green = 0;
      }
      $(this).css('background-color', `rgb(${red}, ${green}, 0)`);
    });
  }, 5000);
}

// 页面加载完成后启动定时器
$(document).ready(function() {
  refreshTemperature();
});

代码说明 #

• 定时器优化：只创建一次setInterval，避免重复创建导致的性能问题
• DOM操作修正：使用jQuery的.css()方法直接操作样式，语法更简洁且符合jQuery规范
• 动态随机值：每次定时器触发时都生成新的随机宽度比例（1-100%），确保温度条真正动态变化
• 颜色渐变逻辑：根据宽度比例（模拟温度值）动态调整温度条的背景色，完美匹配需求中“绿→黄→红”的温度刻度
• 动画优化：在淡出完成后再更新宽度和颜色，然后淡入，让动画过渡更自然流畅

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