我想在此代码中的计数器之前添加一个美元符号货币符号

考特尼·米勒

我想在顶部的计数数字前添加一个固定的“ $”。当我尝试过任何东西时,它会打断计数器并说“ NaNo”,尽管我对编码一无所知,但我希望有人可以告诉我要添加什么以及将其确切放置在代码块中的位置。我希望顶部的主要数字是货币,以便与我添加的信息匹配。之前我添加了使它成为数字的函数,所以数字用逗号格式化,也许还需要另一个函数?

var a = 0;
$(window).scroll(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = number_format(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
        countNum: countTo
      }, {
        duration: 2000,
        easing: 'swing',
        step: function() {
          $this.text(Math.floor(this.countNum));
        },
        complete: function() {
          $this.text(this.countNum);
        }
      });
    });
    a = 1;
  }
});

function number_format(number) {
  var num = number.toLocaleString('en-US', {
    maximumFractionDigits: 0
  })
  return num;
}

var a = 0;
$(window).ready(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
        countNum: countTo
      }, {
        duration: 2000,
        easing: 'swing',
        step: function() {
          $this.text(number_format(this.countNum));
        },
        complete: function() {
          $this.text(number_format(this.countNum));
        }
      });
    });
    a = 1;

  }
});
.counter-value {
  font-size: 80px;
  line-height: 2em;
  text-align: center;
  padding: 17px 0;
}

.counter-value:after {
  content: attr(data-desc);
  display: block;
  text-transform: none;
  font-size: 16px;
  line-height: 1.2em;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<div id="counter">
  <div class="sqs-col sqs-col-4 counter-value" data-count="4172" data-desc="The average American’s 401(k) balance is $104,300 — 
    this amount of money can only be expected to generate $4,172 in 
    sustainable annual retirement income">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="1409" data-desc="As of March 2018, the average monthly Social Security 
    payment is $1,409">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="40000" data-desc="To live on $40,000 a year after stopping work, you will 
    need savings of about $1.18 million to support a 30-year 
    retirement">0</div>
</div>



<div style="border: 0px solid black">
</div>

米歇尔

您只需在选择器之前将CSS的内容添加为“ $”到计数器值类即可。这会将$符号放在具有反值类的每个元素之前:

var a = 0;
$(window).scroll(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = number_format(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
        countNum: countTo
      }, {
        duration: 2000,
        easing: 'swing',
        step: function() {
          $this.text(Math.floor(this.countNum));
        },
        complete: function() {
          $this.text(this.countNum);
        }
      });
    });
    a = 1;
  }
});

function number_format(number) {
  var num = number.toLocaleString('en-US', {
    maximumFractionDigits: 0
  })
  return num;
}

var a = 0;
$(window).ready(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
        countNum: countTo
      }, {
        duration: 2000,
        easing: 'swing',
        step: function() {
          $this.text(number_format(this.countNum));
        },
        complete: function() {
          $this.text(number_format(this.countNum));
        }
      });
    });
    a = 1;

  }
});
.counter-value {
  font-size: 80px;
  line-height: 2em;
  text-align: center;
  padding: 17px 0;
}

.counter-value:before {
  content: "$";
}

.counter-value:after {
  content: attr(data-desc);
  display: block;
  text-transform: none;
  font-size: 16px;
  line-height: 1.2em;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<div id="counter">
  <div class="sqs-col sqs-col-4 counter-value" data-count="4172" data-desc="The average American’s 401(k) balance is $104,300 — 
    this amount of money can only be expected to generate $4,172 in 
    sustainable annual retirement income">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="1409" data-desc="As of March 2018, the average monthly Social Security 
    payment is $1,409">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="40000" data-desc="To live on $40,000 a year after stopping work, you will 
    need savings of about $1.18 million to support a 30-year 
    retirement">0</div>
</div>



<div style="border: 0px solid black">
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

什么是一个Android资源ID之前一个美元符号的意义

如何在Java中使用的printf当我把一个美元符号?

如何在角度js中获取特定货币符号(在我的情况下为卢比符号)而不是默认的货币符号(美元符号)

我在命令提示符中输入了一个问号,而不是货币符号

在一个查询中更新多个计数器

在Postbuild中转义一个美元符号

我如何添加一个计数器,该计数器以后将用于if语句以执行重新加载

在下一个活动中创建列表之前,在加载屏幕中显示一个计数器(对列表项进行计数)

在单元格中添加一个工作表计数器

在价格中添加货币符号

在react中添加一个计数器

在我的数据框中添加一个计数器列,该列根据温度值递增(在另一列中)

用美元符号替换字符串中的最后一个点

grep和转义一个美元符号

StackEdit:反引号中的美元符号将代码块扩展到下一个美元符号

了解CURL命令中的两个标志和一个美元符号

在Android中实现一个简单的计数器

我如何获得一个0之前的计数器?

符号计数器

我想在我的“ li”标签中插入一个:before符号吗?

在我的代码中添加一个计时器

按日期(每天用户)添加一个计数器到查询中

我想在jquery附加的缩进的html代码中添加一个存储在变量中的id

如果我在嵌套的 if 语句中添加一个 else 会遇到计数器问题

如何在我的标签布局中创建一个计数器,比如 Whatsapp?

在java中为计数器添加一个动作监听器

我不明白我的第一个 redux 计数器中的问题

python在循环计数器中添加一个值

如果条件为真,我有一个添加到计数器的代码片段。我怎样才能缩短它?