时间戳

首页 > 解决方案 > 将后缀/前缀添加到简单的数字计数器脚本中

jquery - 将后缀/前缀添加到简单的数字计数器脚本中

问题描述

所以我在页面上显示一些统计数据。它工作得很好，而且非常简单。我似乎无法获得后缀或前缀来工作，可能是因为我通常是编码新手。我会在哪里添加 % 或 £ $ 以便它们显示在数字旁边

$('.counter').each(function() {
    var $this = $(this), countTo = $this.attr('data-count');  
    $({ countNum: $this.text()}).animate({
        countNum: countTo
        },
        {
            duration: 5000,
            easing:'linear',
            step: function() {
                $this.text(Math.floor(this.countNum));
            },
            complete: function() {
            $this.text(this.countNum);
        }
    });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="webstats_container">
    <div align="center" class="webstats">
        <h3><strong>Our Stats</strong></h3>
		<div class="row">
			<div class="col-sm-4">
			    <span>Average Claim:</span>
				<div class="counter" data-count="100">
			    </div>
			</div>
			<div class="col-sm-4">
			    <span>Uphold Percentage:</span>
				<div class="counter" data-count="100">
				</div>
			</div>
			<div class="col-sm-4">
			<span>Total Claimed:</span>
				<div class="counter" data-count="100">
				</div>
			</div>
		</div>	
	</div>
</div>

标签： jqueryhtml

解决方案

将计数器值设置为元素时，您可以附加后缀和前缀值

为此，您可以更改；

$this.text(Math.floor(this.countNum));

和

 $this.text(this.countNum);

到 

var suffix="";
var prefix="%";
$this.text(suffix+Math.floor(this.countNum)+ prefix);

和

$this.text(suffix+this.countNum + prefix );


 var suffix="";
     var prefix="%";
    $('.counter').each(function() {
    var $this = $(this),
    countTo = $this.attr('data-count');  
    $({ countNum: $this.text()}).animate({
    countNum: countTo
    },
    {
    duration: 5000,
    easing:'linear',
    step: function() {
    $this.text(suffix+Math.floor(this.countNum)+ prefix);
    },
    complete: function() {
    $this.text(suffix+this.countNum + prefix );
    }
    });  
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="webstats_container">
    <div align="center" class="webstats">
    <h3><strong>Our Stats</strong></h3>
		<div class="row">
			<div class="col-sm-4">
			<span>Average Claim:</span>
				<div class="counter" data-count="100">
				</div>
			</div>
			<div class="col-sm-4">
			<span>Uphold Percentage:</span>
				<div class="counter" data-count="100">
				</div>
			</div>
			<div class="col-sm-4">
			<span>Total Claimed:</span>
				<div class="counter" data-count="100">
				</div>
			</div>
		</div>	
	</div>
</div>

推荐阅读