Question

我想将countup.js与自动CSS格式（颜色）结合起来。我具有以下三个条件：

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

sample file包含三个数字（负数，中性数和正数）。 CSS代码中指出了我手动分配给该数字的颜色。我希望根据显示的数字自动分配此颜色。

https

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;
}

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

提前谢谢！

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

Countup.js颜色编号，按语句（正，中性，负）

1 个答案: