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

Question

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

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

该示例文件包含三个数字（负数，中性数和正数）。 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