jQuery 计数器计数到目标数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2540277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 13:44:37 来源:igfitidea点击:
jQuery counter to count up to a target number
提问by Matt Huggins
I'm trying to find out if anyone knows about an already existing jQuery plugin that will count up to a target number at a specified speed.
我试图找出是否有人知道一个已经存在的 jQuery 插件，该插件将以指定的速度计算到目标数字。
For example, take a look at Google's number of MB of free storage on the Gmail homepage, under the heading that reads "Lots of space". It has a starting number in a <span>tag, and slowly counts upward every second.
例如，在Gmail 主页上的“大量空间”标题下查看 Google 的免费存储空间 MB 数。它在<span>标签中有一个起始编号，并且每秒缓慢地向上计数。
I'm looking for something similar, but I'd like to be able to specify:
我正在寻找类似的东西，但我希望能够指定：
- The start number
- The end number
- The amount of time it should take to get from start to end.
- A custom callback function that can execute when a counter is finished.
- 起始编号
- 结束编号
- 从开始到结束应该花费的时间。
- 可以在计数器完成时执行的自定义回调函数。
回答by Matt Huggins
I ended up creating my own plugin. Here it is in case this helps anyone:
我最终创建了自己的插件。以防万一这对任何人都有帮助：
(function($) {
$.fn.countTo = function(options) {
// merge the default plugin settings with the custom options
options = $.extend({}, $.fn.countTo.defaults, options || {});
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to - options.from) / loops;
return $(this).each(function() {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);
function updateTimer() {
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals));
if (typeof(options.onUpdate) == 'function') {
options.onUpdate.call(_this, value);
}
if (loopCount >= loops) {
clearInterval(interval);
value = options.to;
if (typeof(options.onComplete) == 'function') {
options.onComplete.call(_this, value);
}
}
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 100, // 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
onUpdate: null, // callback method for every time the element is updated,
onComplete: null, // callback method for when the element finishes updating
};
})(jQuery);
Here's some sample code of how to use it:
下面是一些如何使用它的示例代码：
<script type="text/javascript"><!--
jQuery(function($) {
$('.timer').countTo({
from: 50,
to: 2500,
speed: 1000,
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
//--></script>
<span class="timer"></span>
View the demo on JSFiddle: http://jsfiddle.net/YWn9t/
在 JSFiddle 上查看演示：http: //jsfiddle.net/YWn9t/
回答by FDisk
You can use the jQuery animatefunction
您可以使用jQuery 动画功能
// Enter num from and to
$({countNum: 99}).animate({countNum: 1000}, {
duration: 8000,
easing:'linear',
step: function() {
// What todo on every count
console.log(Math.floor(this.countNum));
},
complete: function() {
console.log('finished');
}
});
回答by vsync
I've created the tiniest code to do exactly that. It's not only for counting but for any task that needs to run in a given time. (let's say, do something for 5 seconds):
我已经创建了最微小的代码来做到这一点。它不仅用于计数，还用于需要在给定时间内运行的任何任务。（比方说，做某事 5 秒）：
Codepen Demo Page
Do-In: Github Project(super lightweight tiny script)
Codepen 演示页面
完成：Github 项目（超轻量级小脚本）
Demo:
演示：
var step = function(t, elapsed){
// easing
t = t*t*t;
// calculate new value
var value = 300 * t; // will count from 0 to 300
// limit value ("t" might be higher than "1")
if( t > 0.999 )
value = 300;
// print value (converts it to an integer)
someElement.innerHTML = value|0;
};
var done = function(){
console.log('done counting!');
};
// Do-in settings object
var settings = {
step : step,
duration : 3,
done : done,
fps : 24 // optional. Default is requestAnimationFrame
};
// initialize "Do-in" instance
var doin = new Doin(settings);
回答by Tatu Ulmanen
Don't know about plugins but this shouldn't be too hard:
不知道插件，但这应该不会太难：
;(function($) {
$.fn.counter = function(options) {
// Set default values
var defaults = {
start: 0,
end: 10,
time: 10,
step: 1000,
callback: function() { }
}
var options = $.extend(defaults, options);
// The actual function that does the counting
var counterFunc = function(el, increment, end, step) {
var value = parseInt(el.html(), 10) + increment;
if(value >= end) {
el.html(Math.round(end));
options.callback();
} else {
el.html(Math.round(value));
setTimeout(counterFunc, step, el, increment, end, step);
}
}
// Set initial value
$(this).html(Math.round(options.start));
// Calculate the increment on each step
var increment = (options.end - options.start) / ((1000 / options.step) * options.time);
// Call the counter function in a closure to avoid conflicts
(function(e, i, o, s) {
setTimeout(counterFunc, s, e, i, o, s);
})($(this), increment, options.end, options.step);
}
})(jQuery);
Usage:
用法：
$('#foo').counter({
start: 1000,
end: 4500,
time: 8,
step: 500,
callback: function() {
alert("I'm done!");
}
});
Example:
例子：
I guess the usage is self-explanatory; in this example, the counter will start from 1000 and count up to 4500 in 8 seconds in 500ms intervals, and will call the callback function when the counting is done.
我想用法是不言自明的；在此示例中，计数器将从 1000 开始，以 500 毫秒为间隔在 8 秒内计数到 4500，并在计数完成时调用回调函数。
回答by Veger
I do not know about any existing plugins, but it seems fairly easy to write one yourself using the JavaScript Timing Events.
我不知道任何现有的插件，但使用JavaScript Timing Events自己编写一个插件似乎相当容易。
回答by user774904
A different approach. Use Tween.js for the counter. It allows the counter to slow down, speed up, bounce, and a slew of other goodies, as the counter gets to where its going.
一种不同的方法。使用 Tween.js 作为计数器。它允许计数器减慢，加速，反弹，以及一系列其他好东西，因为计数器到达它要去的地方。
http://jsbin.com/ekohep/2/edit#javascript,html,live
http://jsbin.com/ekohep/2/edit#javascript,html,live
Enjoy :)
享受 ：）
PS, doesn't use jQuery - but obviously could.
PS，不使用 jQuery - 但显然可以。
回答by spender
Needed a break, so I cobbled the following together. Not sure it would be worth creating a plugin from though.
需要休息一下，所以我拼凑了以下内容。不确定是否值得创建一个插件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Counter
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
function createCounter(elementId,start,end,totalTime,callback)
{
var jTarget=jQuery("#"+elementId);
var interval=totalTime/(end-start);
var intervalId;
var current=start;
var f=function(){
jTarget.text(current);
if(current==end)
{
clearInterval(intervalId);
if(callback)
{
callback();
}
}
++current;
}
intervalId=setInterval(f,interval);
f();
}
jQuery(document).ready(function(){
createCounter("counterTarget",0,20,5000,function(){
alert("finished")
})
})
//]]>
</script>
</head>
<body>
<div id="counterTarget"></div>
</body>
</html>
回答by sputn1k
Another way to do this without jQuery would be to use Greensock's TweenLiteJS library.
另一种不使用 jQuery 的方法是使用 Greensock 的TweenLiteJS 库。
Demo http://codepen.io/anon/pen/yNWwEJ
演示http://codepen.io/anon/pen/yNWwEJ
var display = document.getElementById("display");
var number = {param:0};
var duration = 1;
function count() {
TweenLite.to(number, duration, {param:"+=20", roundProps:"param",
onUpdate:update, onComplete:complete, ease:Linear.easeNone});
}
function update() {
display.innerHTML = number.param;
}
function complete() {
//alert("Complete");
}
count();
回答by SirCommy
回答by Kaleem Ullah
CodePen Working Example
CodePen工作示例
For more GitHub repo
获取更多 GitHub 存储库
<!DOCTYPE html>
<html>
<head>
<title>Count Up Numbers Example</title>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<style type="text/css">
/*
Courtesy: abcc.com
https://abcc.com/en
https://abcc.com/en/at-mining
*/
.rewards {
background-color: #160922;
}
.th-num-bold {
font-family: "Arial" ;
}
.ff-arial {
font-family: "Arial" ;
}
.scroll-wrap .scroll-exchange-fee .exchange_time {
color: hsla(0,0%,100%,.7);
font-size: 13px;
}
.f14 {
font-size: 14px;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.jcsb {
-ms-flex-pack: justify!important;
-webkit-box-pack: justify!important;
justify-content: space-between!important;
}
.aic {
-ms-flex-align: center!important;
-webkit-box-align: center!important;
align-items: center!important;
}
li {
list-style: none;
}
.pull-left {
float: left!important;
}
.rewards-wrap {
height: 100%;
}
.at-equity-wrap .rewards .calculate_container {
-webkit-box-shadow: rgba(0,0,0,.03) 0 5px 10px 0;
background: url(https://s.abcc.com/portal/static/img/home-bg-pc.c9207cd.png);
background-repeat: no-repeat;
background-size: 1440px 100%;
box-shadow: 0 5px 10px 0 rgba(0,0,0,.03);
margin: 0 auto;
max-width: 1200px;
overflow: hidden;
position: relative;
}
.rewards-pc-wrap .current-profit .point {
color: #fff;
font-size: 25px;
}
.rewards-pc-wrap .current-profit .integer {
color: #fff;
font-size: 45px;
}
.rewards-pc-wrap .current-profit .decimal {
color: #fff;
font-size: 25px;
}
.rewards-pc-wrap .current-profit .unit {
color: #fff;
font-size: 24px;
margin-right: 5px;
margin-top: 18px;
}
.rewards-pc-wrap .yesterday-profit .point {
color: #fff;
font-size: 25px;
}
.rewards-pc-wrap .yesterday-profit .integer {
color: #fff;
font-size: 45px;
}
.rewards-pc-wrap .yesterday-profit .decimal {
color: #fff;
font-size: 25px;
}
.rewards-pc-wrap .yesterday-profit .unit {
color: #fff;
font-size: 24px;
margin-right: 5px;
margin-top: 18px;
}
.rewards-pc-wrap .profit-rate-100 .point {
color: #fff;
font-size: 25px;
}
.rewards-pc-wrap .profit-rate-100 .integer {
color: #fff;
font-size: 45px;
}
.rewards-pc-wrap .profit-rate-100 .decimal {
color: #fff;
font-size: 25px;
}
.rewards-pc-wrap .profit-rate-100 .unit {
color: #fff;
font-size: 24px;
margin-right: 5px;
margin-top: 18px;
}
.rewards-pc-wrap .total-profit .point {
color: #fff;
font-size: 25px;
}
.rewards-pc-wrap .total-profit .integer {
color: #fff;
font-size: 45px;
}
.rewards-pc-wrap .total-profit .decimal {
color: #fff;
font-size: 25px;
}
.rewards-pc-wrap .total-profit .unit {
color: #fff;
font-size: 24px;
margin-right: 5px;
margin-top: 18px;
}
.rewards-pc-wrap {
height: 400px;
margin-left: 129px;
padding-top: 100px;
width: 630px;
}
.itm-rv {
-ms-flex: 1;
-webkit-box-flex: 1;
flex: 1;
font-family: "Arial";
}
.fb {
font-weight: 700;
}
.main-p {
color: hsla(0,0%,100%,.7);
font-size: 13px;
margin-bottom: 8px;
margin-top: 10px;
}
.sub-p {
color: hsla(0,0%,100%,.5);
font-size: 12px;
margin-top: 12px;
}
.fb-r {
font-weight: 300;
}
.price-btc {
color: hsla(0,0%,100%,.5);
font-size: 13px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="at-equity-wrap">
<div class="rewards" >
<div class="calculate_container">
<div class="rewards-wrap">
<div class="flex jcc aic">
<div class="rewards-pc-wrap slideInUp" id="nuBlock">
<div class="flex jcsb aic">
<div class="itm-rv" style="margin-right: 60px;">
<div class="current-profit th-num-bold fb"><span class="unit pull-left">$</span> <span class="integer" id="cr_prft_int" >0</span> <span class="point">.</span> <span class="decimal" id="cr_prft_dcml" >00</span></div>
<p class="main-p">Platform Rewards to Be Distributed Today</p>
<p class="sub-p fb-r">Total circulating KAT eligible for rewards:100,000,000</p>
</div>
<div class="itm-rv">
<div class="profit-rate-100 th-num-bold"><span class="unit pull-left">$</span> <span class="integer" id="dly_prft_int" >0</span> <span class="point">.</span><span class="decimal" id="dly_prft_dcml" >00</span></div>
<p class="main-p">Daily Rewards of 1000 KAT</p>
<div class="profit-rate sub-p fb-r"><span >Daily KAT Rewards Rate</span> <span class="integer">0</span> <span class="decimal">.00</span> <span class="unit">%</span></div>
</div>
</div>
<div class="flex jcsb aic" style="margin-top: 40px;">
<div class="itm-rv" style="margin-right: 60px;">
<div class="yesterday-profit th-num-bold fb'"><span class="unit pull-left">$</span> <span class="integer" id="ytd_prft_int" >0</span> <span class="point">.</span><span class="decimal" id="ytd_prft_dcml" >00</span></div>
<div class="price-btc fb-r">/ 0.00000000 BTC</div>
<p class="main-p fb-r">Platform Rewards Distributed Yesterday</p>
</div>
<div class="itm-rv">
<div class="total-profit th-num-bold fb'"><span class="unit pull-left">$</span> <span class="integer" id="ttl_prft_int" >0</span> <span class="point">.</span><span class="decimal" id="ttl_prft_dcml" >00</span></div>
<div class="price-btc fb-r">/ 0.00000000 BTC</div>
<p class="main-p fb-r">Cumulative Platform Rewards Distributed</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).on('ready', function(){
setTimeout(function(){
cr_countUp();
dly_countUp();
ytd_countUp();
ttl_countUp();
}, 2000);
});
unit = "$";
var cr_data, dly_data, ytd_data, ttl_data;
cr_data = dly_data = ytd_data = ttl_data = ["670.0000682", "670.002", "660.000068", "660.002", "650.000000063", "650.01", "640.00000006", "640.01", "630.0000000602", "630.01", "620.0000000622", "620.01", "610.00000016", "610.002", "600.00000015998", "600.002", "590.00000094", "590.002", "580.0000009", "580.002", "760.0000682", "760.002", "660.000068", "660.002", "560.000000063", "560.01", "460.00000006", "460.01", "360.0000000602", "360.01", "260.0000000622", "260.01", "160.00000016", "160.002", "060.00000015998", "060.002", "950.00000094", "950.002", "850.0000009", "850.002"];
cr_start = 0;
cr_stop = cr_data.length - 1;
cr_nu = 20;
function cr_countUp(){
setTimeout(function(){
$("#cr_prft_int").text(cr_data[cr_start].split(".")[0]);
$("#cr_prft_dcml").text(cr_data[cr_start].split(".")[1]);
if(cr_start < cr_stop){
cr_start += 1;
cr_countUp();
}
}, cr_nu);
}
dly_start = 0;
dly_stop = dly_data.length - 1;
dly_nu = 20;
function dly_countUp(){
setTimeout(function(){
$("#dly_prft_int").text(dly_data[dly_start].split(".")[0]);
$("#dly_prft_dcml").text(dly_data[dly_start].split(".")[1]);
if(dly_start < dly_stop){
dly_start += 1;
dly_countUp();
}
}, dly_nu);
}
ytd_start = 0;
ytd_stop = ytd_data.length - 1;
ytd_nu = 20;
function ytd_countUp(){
setTimeout(function(){
$("#ytd_prft_int").text(ytd_data[ytd_start].split(".")[0]);
$("#ytd_prft_dcml").text(ytd_data[ytd_start].split(".")[1]);
if(ytd_start < ytd_stop){
ytd_start += 1;
ytd_countUp();
}
}, ytd_nu);
}
ttl_start = 0;
ttl_stop = ttl_data.length - 1;
ttl_nu = 20;
function ttl_countUp(){
setTimeout(function(){
$("#ttl_prft_int").text(ttl_data[ttl_start].split(".")[0]);
$("#ttl_prft_dcml").text(ttl_data[ttl_start].split(".")[1]);
if(ttl_start < ttl_stop){
ttl_start += 1;
ttl_countUp();
}
}, ttl_nu);
}
</script>
</html>
