javascript - Countup.js 颜色数按语句(正面、中性、负面)

Question

我想将 countup.js 与自动 css 格式(颜色)相结合。我有以下三个条件的地方:

• 如果小于 0 则为红色
• 如果等于 0 则为黑色
• 如果大于 0 则为绿色

sample file包含三个数字(负数、中性数和正数)。在 CSS 代码中说明了我手动分配给数字的颜色。我希望根据显示的数字自动分配这种颜色。

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: ".",
  prefix: "-"
};
var demo = new CountUp("red", 0, 1000, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: "."
};
var demo = new CountUp("black", 0, 0, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: "."
};
var demo = new CountUp("green", 0, 1000, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

#prg-counter .prg-container {
  text-align: center;
  width: 80%;
  margin: auto;
}

#prg-head h1 {
  text-align: center;
}

.color_red {
  color: red;
}

.color_black {
  color: black;
}

.color_green {
  color: green;
}

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/1.8.5/countUp.min.js"></script>
  <div id="prg-counter">
  <section id="prg-head">
    <h1>Count-Up Color</h1>
    <hr/>
  </section>
  <div class="prg-container row">
    <div class="col-md-4">
      <h4 class="color_red" id="red"></h4>
      <h4 class="prg-count-title">red
        < 0 </h4>
    </div>
    <div class="col-md-4">
      <h4 class="color_black" id="black"></h4>
      <h4 class="prg-count-title">black = 0</h4>
    </div>
    <div class="col-md-4">
      <h4 class="color_green" id="green"></h4>
      <h4 class="prg-count-title">green > 0 </h4>
    </div>
  </div>
  <hr/>
</div>

有谁知道格式化是如何自动进行的？

提前致谢!

Answer 1

通过使用MutationObserver

var c = document.getElementsByClassName('color');
for(let i=0; i<c.length; i++){
   // create an observer instance
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if(Number(mutation.target.innerHTML) < 0){
              mutation.target.style.color = "red"
            }else if(Number(mutation.target.innerHTML) > 0){
              mutation.target.style.color = "green"
            }else if(Number(mutation.target.innerHTML) == 0){
              mutation.target.style.color = "black"
            }
        });
    });

    var config = { attributes: true, childList: true, characterData: true }
    observer.observe(c[i], config);
}

var c = document.getElementsByClassName('color');
for (let i = 0; i < c.length; i++) {
  // create an observer instance
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (Number(mutation.target.innerHTML) < 0) {
        mutation.target.style.color = "red"
      } else if (Number(mutation.target.innerHTML) > 0) {
        mutation.target.style.color = "green"
      } else if (Number(mutation.target.innerHTML) == 0) {
        mutation.target.style.color = "black"
      }
    });
  });

  var config = {
    attributes: true,
    childList: true,
    characterData: true
  }
  observer.observe(c[i], config);
}

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: ".",
  prefix: "-"
};
var demo = new CountUp("red", 0, 1000, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: "."
};
var demo = new CountUp("black", 0, 0, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: "."
};
var demo = new CountUp("green", 0, 1000, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

#prg-counter .prg-container {
  text-align: center;
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}

#prg-head h1 {
  text-align: center;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/1.8.5/countUp.min.js"></script>

<div id="prg-counter">
  <section id="prg-head">
    <h1>Count-Up Color</h1>
    <hr/>
  </section>
  <div class="prg-container row">
    <div class="col-md-4">
      <h4 class="color" id="red"></h4>
      <h4 class="prg-count-title">red
        < 0 </h4>
    </div>
    <div class="col-md-4">
      <h4 class="color" id="black"></h4>
      <h4 class="prg-count-title">black = 0</h4>
    </div>
    <div class="col-md-4">
      <h4 class="color" id="green"></h4>
      <h4 class="prg-count-title">green > 0 </h4>
    </div>
  </div>
  <hr/>
</div>

这是 codepen