javascript - 如何为特定时间的元素设置背景颜色？

Question

这是我的代码:

$('html,body').animate({scrollTop: -20 + $('.clsname').offset().top});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="clsname">scroll to here</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

我还需要添加这段代码:

var $el = $(".clsname"),
    x = 2000,
    originalColor = $el.css("background");

$el.css("background", "orange");
setTimeout(function(){
  $el.css("background", originalColor);
}, x);

我的意思是，我想滚动到一个元素并将其设置为橙色背景颜色 2 秒。我该怎么做？

注意:如果橙色在 2 秒后平滑就完美了。

Answer 1

您可以使用一些 JS 根据任何时间更改它，这是早上、白天和晚上。

$(document).ready(function(){
    var d = new Date();
    var n = d.getHours();
    if (n > 19 || n < 6)
      // If time is after 7PM or before 6AM, apply night theme to ‘body’
      document.body.className = "night";
    else if (n > 16 && n < 19)
      // If time is between 4PM – 7PM sunset theme to ‘body’
      document.body.className = "sunset";
    else
      // Else use ‘day’ theme
      document.body.className = "day";
});