jQuery计数器计数到目标数字
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery计数器计数到目标数字相关的知识，希望对你有一定的参考价值。
我试图找出是否有人知道已经存在的jQuery插件将以指定的速度计数到目标数量。
例如，看一下Google在Gmail homepage上的免费存储空间数量，标题为“空间很大”。它在<span>标签中有一个起始编号，并且每秒慢慢向上计数。
我正在寻找类似的东西，但我希望能够指明：
- 起始编号
- 结束号码
- 从开始到结束所需的时间。
- 一个自定义回调函数，可以在计数器完成时执行。
答案
我最终创建了自己的插件。这是为了以防万一：
(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);
这是一些如何使用它的示例代码：
<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>
在JSFiddle上查看演示：http://jsfiddle.net/YWn9t/
另一答案
CodePen 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();
更多GitHub Working Example
repo
另一答案
您可以使用jquery animate函数。
<!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 {
co以上是关于jQuery计数器计数到目标数字的主要内容，如果未能解决你的问题，请参考以下文章