jquery - 根据范围设置 css 颜色

Question

我成功地每 4 秒生成一个 0 到 180 之间的随机数。

我需要根据随机数设置一个 div 的背景色。喜欢

在 0 到 60 之间将 css 颜色设置为红色，rgba(255, 0, 0, 1.0)

介于 61 和 120 之间的绿色，rgba(0, 255, 0, 1.0)

介于 121 和 180 之间的蓝色，rgba(0, 0, 255, 1.0)

所以这一切都必须取决于变量...任何想法...

Answer 1

运行此代码并单击框以获取随机颜色

    $(window).ready(function() {

  $('#background').click(function() {

    var number = Math.floor((Math.random() * 180) + 0);
   console.log("random number is: "+ number);
    if (number <= 60) {
      $(this).css('backgroundColor', "rgba(255, 0, 0, 1.0)")

    } else if (number <= 120) {
      $(this).css('backgroundColor', 'rgba(0, 255, 0, 1.0)');
    } else {
      $(this).css('backgroundColor', 'rgba(0, 0, 255, 1.0)');
    }

  });
})

#background {
  width: 100px;
  height: 100px;
  background-color: rgb(255, 0, 255);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="background"></div>