javascript - 为函数输出添加颜色

Question

这是使用 jquery。超过一定数量时如何为输出着色。

$("#text").on("input", updateCount);

function updateCount() {
  count = $("#text").val().length;
  $("#count").text(count + "/20");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="text"></textarea>
    <div id="count">0/20</div>

所以在 20/20，前 20 个需要是红色的。

Answer 1

到 20 应该是红色的？

无论如何，使用简单的 if-else 就可以检查计数的值。小于20时用红色，否则用黑色。

与 .css(attr, value)您可以更改元素的颜色。

$("#text").on("input", updateCount);

function updateCount() {
  count = $("#text").val().length;
  color = (count < 20) ? 'red' : 'black';
  $("#count").css('color',color).text(count + "/20");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="text"></textarea>
<div id="count">0/20</div>

如果20之后应该是红色的，那么就改成<至 >

如果您想使用多个步骤和多种颜色，请改用开关

$("#text").on("input", updateCount);

function updateCount() {
  const count = $("#text").val().length;
  switch (true) {
    case (count < 5):
      color = 'red';
      break;
    case (count < 15):
      color = 'orange';
      break;
    case (count < 20):
      color = 'yellow';
      break;
    case (count == 20):
      color = 'blue';
      break;
    default:
      color = 'green';
      break;
  }
  $("#count").css('color', color).text(count + "/20");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="text"></textarea>
<div id="count">0/20</div>