Question

所以，我对JS几乎一无所知，并希望在我的页面上使用这个计数器，但是希望显示类似＆＃34; 1815 +＆＃34; （在数字后面加一个加号，表示它高于该数字）在我的＆＃34; number3＆＃34;类。我怎样才能做到这一点？

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

代码：

＆＃13;

$.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
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

＆＃13;

factors n = [x | x <- [1..n], n `mod` x == 0]
primes = [x| x <- [1..], length (factors x) == 2]

＆＃13;

$.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
});

＆＃13;

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

＆＃13;

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

1 个答案: