1
我想将％添加到从0到100的数字的末尾，以便使用它来显示一些统计信息。将百分比添加到数字计数器javascript
我试图
#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>