javascript - 如何使用 JS 定期更改 div 的宽度？

Question

我在背景中有一个温度刻度(在某种程度上是绿色，然后是黄色，然后是红色)，并且需要一个温度“条”在它上面:

1. 在固定的时间间隔后刷新，就像它定期“更新”自己一样
2. 根据它读取的参数动态改变它的宽度。现在我只是想用一个随机数生成器(在一个范围内)来做到这一点

我做了类似的事情，在这里创建了一个 div

<div id="temperatureBar" style="background-color: black; height: 20px;"></div>

并使用了一些 jQuery

function refreshTemperature(){
    var width = (Math.random() * (100 - 1)) + 1;
    setInterval(function () {
        $('#temperatureBar').fadeOut('slow');
        $(document).getElementById('temperatureBar').style.width = width+"px";
        $('#temperatureBar').fadeIn('slow');
        refreshTemperature();
    }, 5000);
}

但这行不通。谁能帮我找到可行的解决方案？

Answer 1

你应该使用 jquery 的 $.css 方法。

您可能没有注意到的另一件事是 setInterval 在您的代码中每 5 秒调用一次，并且每次调用都会启动另一个 setInterval .
这意味着几分钟后，您将有大量 事件等待调用，这将导致各种问题。请改用 setTimeout。

这是一个工作示例:

function refreshTemperature() {
  setTimeout(function() {
    var elem = $('#temperatureBar')
    var width = (Math.random() * (100 - 1)) + 1;
    elem.fadeOut('slow');
    elem.css('width', width + "px");
    elem.fadeIn('slow');
    refreshTemperature();
  }, 5000);
}

refreshTemperature()

#temperatureBar {
  background-color: tomato;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="temperatureBar">
  My size changes
</div>