Q
计数器设置动画
1
A
回答
2
您可以添加
.toLocaleString('en')
步骤属性:
step: function(now) {
$(this).text(Math.ceil(now).toLocaleString('en'));
}
您也可以通过在navigator.language而不是“恩”和小数将显示根据用户的浏览器语言设置。
1
它可以使用与正则表达式一个替代来实现:
$(function(){
$('.count').each(function() {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
}
});
});
});
#shiva
{
width: 100px;
\t height: 100px;
\t background: red;
\t -moz-border-radius: 50px;
\t -webkit-border-radius: 50px;
\t border-radius: 50px;
float:left;
margin:5px;
}
.count
{
line-height: 100px;
color:white;
margin-left:30px;
font-size:25px;
}
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float:left;
margin:20px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
.linker
{
font-size : 20px;
font-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shiva"><span class="count">200</span></div>
<div id="shiva"><span class="count">10000</span></div>
<div id="shiva"><span class="count">8530</span></div>
<div id="shiva"><span class="count">1540</span></div>
<div id="shiva"><span class="count">10</span></div>
<div id="shiva"><span class="count">87</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">1421</span></div>
<div id="talkbubble"><span class="count">145</span></div>
<div id="talkbubble"><span class="count">78</span></div>
<br />
<br />
<a class="linker" href="http://www.i-visionblog.com/2014/11/jquery-animated-number-counter-from-zero-to-value-jquery-animation.html" target="_blank">visit Tutorial in Blog</a>
<br />
1
$('.count').each(function() {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
now = Number(Math.ceil(now)).toLocaleString('en');
$(this).text(now);
}
});
});
1
我需要非常类似的东西你想要什么,除了我需要能够以动画的美元变化和美分(类似于Turbotax计数器)。我在网上找不到任何有用的东西,所以我从SO上的几个例子一起攻击了这一点。关键是使用步骤回调函数来根据需要设置值的格式。很酷的是,无论你在价值上涨还是下跌,这都是有效的。
希望这段代码能帮助你。
<div id="total">$9.99</div>
<script>
//NOTE: Always work with currency in total value in cents,
//hence the need for .toMoney() and .fromMoney()
var $total = jQuery("#total");
var finaltotal = 29999; //$299.99
var currval = $total.text().fromMoney();
//only animate if the values are different
if(currval !== finaltotal) {
console.log("start: " + currval);
console.log("end: " + finaltotal);
$({"counter": currval })
.animate({ counter: finaltotal },
{
duration: 500,
easing: "swing",
step: function() {
$total.text(this.counter.toMoney());
},
complete: function() {
//animate is a bit off more often than not.
//Nobody will notice if the animation happens quickly
//so after the animate is done we slam in the final value.
$total.text(finaltotal.toMoney());
console.log("animate complete");
}
});
}
//Convert a currency string (with or without dollar sign or commas)
//to an integer representing total value in cents
//E.g.: $149.99 becomes 14999
String.prototype.fromMoney = function() {
return parseInt(this.replace(/^\$/,'').replace(/,/g, '').replace(/\./, ''));
}
//Convert a given integer representing only cents ($149.99 = 14999) to a
//proper, comma delimited US dollar amount with the dollar sign
//Modern browsers from IE 11 onward support
//foo.toLocaleString("en-US", {style:"currency", currency:"USD"});
//but the method below works for most older browsers.
//Found on SO @ http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript
Number.prototype.toMoney = function(c, d, t) {
var n = this/100,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return s + "$" + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3}) (?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}
</script>
相关问题
- 1. 为倒计时脚本设置动画
- 2. 滚动的动画数字计数器
- 3. 将动画侦听器设置为活动动画
- 4. 设置CALayer.AnchorPoint动画
- 5. android - 设置计数器
- 6. 动画设置位置
- 7. 数字计数器 - 制作一个动画计数器
- 8. 设置一个监听器,帧动画
- 9. 链动画设置android动画
- 10. 材质设计动画
- 11. 动画actionBar材质设计
- 12. 如何为同一动画设置两个动画监听器?
- 13. 使用Javascript的动画计数器
- 14. 动画多个uiscrollviews计数器像
- 15. jQuery循环动画与计数器
- 16. setInterval计数器与jQuery动画
- 17. 如何动画JavaScript计数器
- 18. 在NSTableView中设置动画行数
- 19. 计时器与动画
- 20. 计时器和动画
- 21. stm32动态计时器设置更改
- 22. Raphaeljs - 动画设置变换
- 23. 使用JQuery设置动画
- 24. iOS用动画设置UIImage
- 25. UITableView - BeginUpdates/EndUpdates动画设置
- 26. 检测Windows动画设置
- 27. 设置动画速度 - ChartJS?
- 28. 使用素数设置计数器
- 29. 在JavaScript函数中设置计数器?
- 30. 如何为'Raphael'画布设置动画?
https://jsfiddle.net/8rtadpep/ - 来自这里的示例 - http://www.mredkj.com/javascript/numberFormat.html – Tasos