javascript - 将百分比添加到数字计数器javascript

Question

我想在从 0 到 100 的数字末尾添加 % 以使用它来显示一些统计信息。

我试过了

#fh5co-counter:after{
 content:'%';
}

但它什么都不做。我一直无法找到一种有效的方法来添加 % 符号而不搞砸，如果有人能提供帮助，我将不胜感激

这是片段

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // CommonJS
    factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function($) {
  var CountTo = function(element, options) {
    this.$element = $(element);
    this.options = $.extend({}, CountTo.DEFAULTS, this.dataOptions(), options);
    this.init();
  };

  CountTo.DEFAULTS = {
    from: 0, // the number the element should start at
    to: 0, // the number the element should end at
    speed: 1000, // how long it should take to count between the target numbers
    refreshInterval: 100, // how often the element should be updated
    decimals: 0, // the number of decimal places to show
    formatter: formatter, // handler for formatting the value before rendering
    onUpdate: null, // callback method for every time the element is updated
    onComplete: null // callback method for when the element finishes updating
  };

  CountTo.prototype.init = function() {
    this.value = this.options.from;
    this.loops = Math.ceil(this.options.speed / this.options.refreshInterval);
    this.loopCount = 0;
    this.increment = (this.options.to - this.options.from) / this.loops;
  };

  CountTo.prototype.dataOptions = function() {
    var options = {
      from: this.$element.data('from'),
      to: this.$element.data('to'),
      suffix: this.$element.data('suffix'),
      speed: this.$element.data('speed'),
      refreshInterval: this.$element.data('refresh-interval'),
      decimals: this.$element.data('decimals')
    };

    var keys = Object.keys(options);

    for (var i in keys) {
      var key = keys[i];

      if (typeof(options[key]) === 'undefined') {
        delete options[key];
      }
    }

    return options;
  };

  CountTo.prototype.update = function() {
    this.value += this.increment;
    this.loopCount++;

    this.render();

    if (typeof(this.options.onUpdate) == 'function') {
      this.options.onUpdate.call(this.$element, this.value);
    }

    if (this.loopCount >= this.loops) {
      clearInterval(this.interval);
      this.value = this.options.to;

      if (typeof(this.options.onComplete) == 'function') {
        this.options.onComplete.call(this.$element, this.value);
      }
    }
  };

  CountTo.prototype.render = function() {
    var formattedValue = this.options.formatter.call(this.$element, this.value, this.options);
    this.$element.text(formattedValue);
  };

  CountTo.prototype.restart = function() {
    this.stop();
    this.init();
    this.start();
  };

  CountTo.prototype.start = function() {
    this.stop();
    this.render();
    this.interval = setInterval(this.update.bind(this), this.options.refreshInterval);
  };

  CountTo.prototype.stop = function() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  };

  CountTo.prototype.toggle = function() {
    if (this.interval) {
      this.stop();
    } else {
      this.start();
    }
  };

  function formatter(value, options) {
    return value.toFixed(options.decimals);
  }

  $.fn.countTo = function(option) {
    return this.each(function() {
      var $this = $(this);
      var data = $this.data('countTo');
      var init = !data || typeof(option) === 'object';
      var options = typeof(option) === 'object' ? option : {};
      var method = typeof(option) === 'string' ? option : 'start';

      if (init) {
        if (data) data.stop();
        $this.data('countTo', data = new CountTo(this, options));
      }

      data[method].call(data);
    });
  };
}));

#fh5co-counters {
  background: #52d3aa;
  overflow: hidden;
  background-color: transparent;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  width: 100%;
  padding: 9em 0 10em 0;
}
@media screen and (max-width: 768px) {
  #fh5co-counters {
    padding: 4em 0;
  }
}
#fh5co-counters .fh5co-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.7);
}
/*#fh5co-counters:before, {
  position: absolute;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
  background-color: #fff;
  content: "";
  z-index: 3;
  display: inline-block;
  height: 70px;
  padding: 0;
  width: 101%;
}*/

#fh5co-counters:after,
#fh5co-counters:before {
  position: absolute;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
  background-color: #fff;
  content: "";
  z-index: 3;
  display: inline-block;
  height: 70px;
  padding: 0;
  width: 101%;
}
#fh5co-counters:before {
  top: 0;
  margin-top: -35px;
}
#fh5co-counters:after {
  content: '%';
  bottom: 0;
  margin-bottom: -35px;
  background: red;
  /* For browsers that do not support gradients */
  /* For Safari 5.1 to 6.0 */
  background: -webkit-linear-gradient(left, #3f95ea, #419CE1, #42A1DD, #44A6D8, #45ABD2, #47B1CD, #49B5C8);
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(left, #3f95ea, #419CE1, #42A1DD, #44A6D8, #45ABD2, #47B1CD, #49B5C8);
  /* For Fx 3.6 to 15 */
  background: -moz-linear-gradient(left, #3f95ea, #419CE1, #42A1DD, #44A6D8, #45ABD2, #47B1CD, #49B5C8);
  /* Standard syntax */
  background: linear-gradient(to right, #3f95ea, #419CE1, #42A1DD, #44A6D8, #45ABD2, #47B1CD, #49B5C8);
}
#fh5co-counters .section-heading {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
}
#fh5co-counters .section-heading h2 {
  color: #fff;
}
#fh5co-counters .section-heading h2:after {
  background: rgba(255, 255, 255, 0.3) !important;
}
#fh5co-counters .section-heading .subtext h3 {
  color: rgba(255, 255, 255, 0.7) !important;
}
#fh5co-counters .fh5co-counter {
  position: relative;
  z-index: 3;
  text-align: center;
}
@media screen and (max-width: 992px) {
  #fh5co-counters .fh5co-counter {
    margin-bottom: 50px;
    float: left;
    width: 100%;
  }
}
#fh5co-counters .fh5co-counter .fh5co-counter-icon,
#fh5co-counters .fh5co-counter .fh5co-counter-number,
#fh5co-counters .fh5co-counter .fh5co-counter-label {
  display: block;
}
#fh5co-counters .fh5co-counter .fh5co-counter-icon {
  font-size: 40px;
  color: #52d3aa;
}
#fh5co-counters .fh5co-counter .fh5co-counter-number {
  font-size: 70px;
  color: #fff;
  font-weight: 300;
}
#fh5co-counters .fh5co-counter .fh5co-counter-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  font-weight: 400;

<div class="col-md-3 col-sm-6 col-xs-12">
  <div class="fh5co-counter to-animate">
    <img src="images\management.png" alt="Image" class="img-responsive image-popup to-animate">
    <p>Ejecutivos Intermedios</p>
    <span class="fh5co-counter-number js-counter" data-from="0" data-to="65" data-speed="5000" data-refresh-interval="50">65</span>
    <span class="fh5co-counter-label">de ellos son bilingües</span>
  </div>
</div>

Answer 1

要使用after伪元素，应该是:

#fh5co-counter::after{
 content:'%';
}

有两个冒号，不是一个。

https://developer.mozilla.org/en-US/docs/Web/CSS/::after