JSカウンターにプラス記号を追加するにはどうすればいいですか？

Question

私はJSについてほとんど知らないし、私のページでこのカウンターを使用したいと思っていますが、 "1815+"（数字の後ろに数字の後にプラス記号があります） number3 "クラス。どうやってやるの？

私はヘルムコードを変更しようとしましたが、それは良くありませんでした。私はこのプラス記号を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>