根据值输出更改背景颜色

时间：2017-07-19 12:55:08

标签： javascript jquery css

我有一个彩票号码生成器，可以让你在1到49之间生成6个随机数。

如何更改div的背景颜色，具体取决于它在生成时包含<p>标记值/数字？

到目前为止，我已经附上了我的彩票生成器代码。我只需要根据数字结果改变红色背景颜色，如下所示：

  • 1-9：白色
  • 10-19：蓝色
  • 20-29：Ping
  • 30-39：绿色
  • 40-49：黄色

CodePen Example

到目前为止，这是我生成的数字代码： - 

$("#buttonGen").click(function() {
  $(".circle .result1").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result2").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result3").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result4").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result5").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result6").html((Math.floor(Math.random() * 49) + 1));
});

5 个答案:

答案 0 :(得分：3)

要执行您需要的操作，您可以先将同一个类应用于所有.resultN元素。这会让您使用html()的一次调用来影响所有元素，从而干掉您的代码。

然后，您可以设置其随机值，并使用switch语句根据该值更改其背景颜色。试试这个：

＆＃13;
＆＃13; 
$("#buttonGen").click(function() {
  $(".circle .result").text(function() {
    var value = parseInt(Math.floor(Math.random() * 49) + 1), bgColour;
    switch (true) {
      case (value < 10): bgColour = 'white'; break;
      case (value < 20): bgColour = 'blue'; break;
      case (value < 30): bgColour = 'pink'; break;
      case (value < 40): bgColour = 'green'; break;
      case (value < 50): bgColour = 'yellow'; break;
    }   
    $(this).closest('.circle').css('background-color', bgColour);
    return value;
  });
});
＆＃13; 
.__hero-container .title {
  margin-bottom: 30px;
}

.__hero-container .numbers .circle {
  background-color: red;
  border-radius: 50px;
  height: 90px;
}

.__hero-container .numbers .circle p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.__hero-container .button {
  margin-top: 30px;
}
＆＃13; 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="__hero-container">

  <div class="container title">
    <div class="col-md-12 text-center">
      <h1>Lottery Generator</h1>
    </div>
  </div>

  <div class="container text-center numbers">
    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>
  </div>

  <div class="container button">
    <div class="col-md-12 text-center">
      <button id="buttonGen">Generate</button>
    </div>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

只需为检查内容的所有元素添加循环，然后添加特定背景

$( ".circle p" ).each(function(index) {
    if ($(this).html()>0 && $(this).html()<10){
      $(this).parent().css("background","black");
    }else if ($(this).html()>9 && $(this).html()<20){
      $(this).parent().css("background","blue");
    }
    //continue the rest for Ping, Green and Yellow
  });

答案 2 :(得分：1)

这将对您有帮助，只需添加其他验证...

＆＃13;
＆＃13; 
$("#buttonGen").click(function() {
  $(".result1").html((Math.floor(Math.random() * 49) + 1));
  $(".result2").html((Math.floor(Math.random() * 49) + 1));
  $(".result3").html((Math.floor(Math.random() * 49) + 1));
  verifyContent();
});

function verifyContent() {
  $('.circle').each(function(i, obj) {
    var content = $(this).html();
    //console.log(content);
    if (content > 10 && content < 19) {
      $(this).css("background", "blue");
    } else {
      $(this).css("background", "white");
    }
  });
}
＆＃13; 
.circle {
  height: 150px;
  width: 150px;
  border: 1px solid black;
  border-radius: 50%;
  display: inline-block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonGen">Generate</button><br><br>
<div class="circle result1"></div>
<div class="circle result2"></div>
<div class="circle result3"></div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

您可以使用.each()。检查下面更新的代码段。

$("#buttonGen").click(function() {
  $(".circle .result1").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result2").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result3").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result4").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result5").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result6").html((Math.floor(Math.random() * 49) + 1));

    $('.circle').each(function(){
         var numResult = parseInt($(this).find('p').html());
         if(numResult >=1 && numResult <=9) {
             $(this).css('background','white');
         } else if (numResult >=10 && numResult <=19) {
             $(this).css('background','blue');
         } else if (numResult >=20 && numResult <=29) {
             $(this).css('background','pink');
         } else if (numResult >=30 && numResult <=39) {
             $(this).css('background','green');
         } else if (numResult >=40 && numResult <=49) {
             $(this).css('background','yellow');
         }
         
         
    })

})
.__hero-container .title {
  margin-bottom: 30px;
}

.__hero-container .numbers .circle {
  background-color: red;
  border-radius: 50px;
  height: 90px;
  border: 1px solid #000; 
}

.__hero-container .numbers .circle p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.__hero-container .button {
  margin-top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="__hero-container">

  <div class="container title">
    <div class="col-md-12 text-center">
      <h1>Lottery Generator</h1>
    </div>
  </div>
  
  <div class="container text-center numbers">
    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result1">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result2">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result3">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result4">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result5">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result6">0</p>
      </div>
    </div>
  </div>
  
  <div class="container button">
    <div class="col-md-12 text-center">
      <button id="buttonGen">Generate</button>
    </div>
  </div>
  
</div>

答案 4 :(得分：1)

我可能会在设置html之后设置一个函数来确定基于它的颜色。

$("#buttonGen").click(function() {
  $(".circle .result1").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result2").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result3").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result4").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result5").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result6").html((Math.floor(Math.random() * 49) + 1));
  determineColor();
});

function determineColor(){
 $(".circle").each(function(index, value){
    var color = getColorValue(value);
    $(this).css("background-color", color) 
 }
}

function getColorValue(value){
  if(value > 1 && value < 9){
    return "white";
  }
  // add others
}
相关问题
最新问题