如何在JS计数器上添加加号？

Question

因此，我对JS几乎一无所知，并且想在我的页面上将此计数器用作计数器，但是我想在我的“ number3”上显示类似“ 1815 +”（数字后的加号，表明它高于该数字）类。 我怎样才能做到这一点？

我试图更改我的头盔代码，但是效果不是很好，我想如果我在JS代码段上加上这个加号会更好，我不知道。 有人可以向我解释一个简单的方法吗？

码：

 $.fn.jQuerySimpleCounter = function(options) { var settings = $.extend({ start: 0, end: 100, easing: 'swing', duration: 400, complete: '' }, options); var thisElement = $(this); $({ count: settings.start }).animate({ count: settings.end }, { duration: settings.duration, easing: settings.easing, step: function() { var mathCount = Math.ceil(this.count); thisElement.text(mathCount); }, complete: settings.complete }); }; $('#number1').jQuerySimpleCounter({ end: 2, duration: 3000 }); $('#number2').jQuerySimpleCounter({ end: 31, duration: 3000 }); $('#number3').jQuerySimpleCounter({ end: 1865, duration: 2000 }); 

 .sectionClass { background: url("../images/banner.png"); padding: 0px 0px 0px 0px; position: relative; display: block; } .fullWidth { display: table; float: none; padding: 0; min-height: 1px; height: 100%; position: relative; } .projectFactsWrap { display: flex; margin-top: 0px; flex-direction: row; flex-wrap: wrap; } #projectFacts .fullWidth { padding-left: 10%; padding-right: 10%; } .projectFactsWrap .item { width: 33.3333333%; height: 100%; padding: 130px 0px; text-align: center; } .projectFactsWrap .item p.number { font-size: 115px; padding: 8%; /*font-weight: bold;*/ } .projectFactsWrap .item p { color: black; font-size: 18px; margin: 0; padding: 10px; font-family: 'Roboto'; } .projectFactsWrap .item span { width: 39px; background: rgba(255, 255, 255, 0.8); height: 2px; display: block; margin: 0 auto; } .projectFactsWrap .item i { vertical-align: middle; font-size: 60px; color: rgba(255, 255, 255, 0.8); padding: 3%; } .projectFactsWrap .item:hover i, .projectFactsWrap .item:hover p { color: white; } .projectFactsWrap .item:hover span { background: white; } @media (max-width: 786px) { .projectFactsWrap .item { flex: 0 0 50%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div id="projectFacts" class="sectionClass"> <div class="fullWidth eight columns"> <div class="projectFactsWrap "> <div class="item wow fadeInUpBig animated animated" data-number="2" style="visibility: visible;"> <!--<i class="fa fa-briefcase"></i>--> <p id="number1" class="number">2</p> <span></span> <p>Item 1</p> </div> <div class="item wow fadeInUpBig animated animated" data-number="31" style="visibility: visible;"> <!--<i class="fa fa-smile-o"></i>--> <p id="number2" class="number">31</p> <span></span> <p>Item 2</p> </div> <div class="item wow fadeInUpBig animated animated" data-number="1865" style="visibility: visible;"> <!--<i class="fa fa-coffee"></i>--> <p id="number3" class="number">1865</p> <span></span> <p>Item 3</p> </div> </div> </div> </div> </section> 

Answer 1

 $.fn.jQuerySimpleCounter = function(options) { var settings = $.extend({ start: 0, end: 100, easing: 'swing', duration: 400, complete: '' }, options); var thisElement = $(this); $({ count: settings.start }).animate({ count: settings.end }, { duration: settings.duration, easing: settings.easing, step: function() { var mathCount = Math.ceil(this.count); thisElement.text(mathCount); }, complete: function() { var mathCount = this.count > settings.maxNumber ? settings.maxNumber + '+' : this.count; thisElement.text(mathCount); } }); }; $('#number1').jQuerySimpleCounter({ end: 2, duration: 3000 }); $('#number2').jQuerySimpleCounter({ end: 31, duration: 3000 }); $('#number3').jQuerySimpleCounter({ end: 1865, duration: 2000, maxNumber: 1815 }); 

 .sectionClass { background: url("../images/banner.png"); padding: 0px 0px 0px 0px; position: relative; display: block; } .fullWidth { display: table; float: none; padding: 0; min-height: 1px; height: 100%; position: relative; } .projectFactsWrap { display: flex; margin-top: 0px; flex-direction: row; flex-wrap: wrap; } #projectFacts .fullWidth { padding-left: 10%; padding-right: 10%; } .projectFactsWrap .item { width: 33.3333333%; height: 100%; padding: 130px 0px; text-align: center; } .projectFactsWrap .item p.number { font-size: 115px; padding: 8%; /*font-weight: bold;*/ } .projectFactsWrap .item p { color: black; font-size: 18px; margin: 0; padding: 10px; font-family: 'Roboto'; } .projectFactsWrap .item span { width: 39px; background: rgba(255, 255, 255, 0.8); height: 2px; display: block; margin: 0 auto; } .projectFactsWrap .item i { vertical-align: middle; font-size: 60px; color: rgba(255, 255, 255, 0.8); padding: 3%; } .projectFactsWrap .item:hover i, .projectFactsWrap .item:hover p { color: white; } .projectFactsWrap .item:hover span { background: white; } @media (max-width: 786px) { .projectFactsWrap .item { flex: 0 0 50%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div id="projectFacts" class="sectionClass"> <div class="fullWidth eight columns"> <div class="projectFactsWrap "> <div class="item wow fadeInUpBig animated animated" data-number="2" style="visibility: visible;"> <!--<i class="fa fa-briefcase"></i>--> <p id="number1" class="number">2</p> <span></span> <p>Item 1</p> </div> <div class="item wow fadeInUpBig animated animated" data-number="31" style="visibility: visible;"> <!--<i class="fa fa-smile-o"></i>--> <p id="number2" class="number">31</p> <span></span> <p>Item 2</p> </div> <div class="item wow fadeInUpBig animated animated" data-number="1865" style="visibility: visible;"> <!--<i class="fa fa-coffee"></i>--> <p id="number3" class="number">1865</p> <span></span> <p>Item 3</p> </div> </div> </div> </div> </section>