{"id":3693,"date":"2015-04-02T17:41:35","date_gmt":"2015-04-02T09:41:35","guid":{"rendered":"https:\/\/sdeno.com\/?p=3693"},"modified":"2016-09-18T12:08:05","modified_gmt":"2016-09-18T04:08:05","slug":"jquery-animatenumber%e6%95%b0%e5%ad%97%e5%8a%a8%e7%94%bb%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=3693","title":{"rendered":"jquery-animateNumber\u6570\u5b57\u52a8\u753b\u63d2\u4ef6"},"content":{"rendered":"

\u4e0b\u8f7d\uff1anum_aniamte<\/a><\/p>\n

\u6570\u5b57\u8fc7\u6e21 \u6570\u5b57\u52a8\u753b \u6570\u5b57 animate \u6570\u5b57\u9012\u589e \u6570\u5b57\u9012\u52a0<\/p>\n

\u6570\u5b57\u7684\u8fc7\u5ea6\u6548\u679c\u517c\u5bb9IE7+<\/p>\n

\u53e6\u5916\u9644\u52a0jquery.color.min.js\u989c\u8272\u8fc7\u6e21\u4ee5\u53ca\u5b57\u4f53\u8fc7\u6e21\u6548\u679c<\/p>\n

\u6240\u6709\u6848\u4f8b\uff1ahttp:\/\/aishek.github.io\/jquery-animateNumber\/<\/a><\/p>\n

\u5b9e\u4f8b\u4e00\u3001\u57fa\u7840\u52a8\u753b<\/p>\n

\/\/html\u4ee3\u7801\uff0c\u4e0b\u9762\u4f8b\u5b50\u76f8\u540c\u3002\r\n<p>This plugin only <span id=\"lines\">0<\/span> lines of code.<\/p>\r\n\/\/JS \u4ee3\u7801\uff0c\u8bf7\u628a\u4ee3\u7801\u653e\u5165script\u6807\u7b7e\u5185\uff0c\u4e0b\u9762\u4f8b\u5b50\u76f8\u540c\r\n$('#lines').animateNumber({ number: 165 });\r\n\r\n<\/pre>\n
 <\/p>\n
\u5b9e\u4f8b\u4e8c\u3001\u6570\u5b57\u95f4\u663e\u793a\u5206\u9694\u7b26<\/p>\n
<p>World population is <span id=\"world-population\">0<\/span>.<\/p>\r\nvar comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')\r\n$('#world-population').animateNumber(\r\n  {\r\n    number: 7095217980,\r\n    numberStep: comma_separator_number_step\r\n  }\r\n);\r\n\r\n<\/pre>\n
 <\/p>\n
\u5b9e\u4f8b\u4e09\u3001\u4f7f\u7528\u591a\u4e2a\u5c5e\u6027\u63a7\u5236\u52a8\u753b<\/p>\n
<p>Fun level <span id=\"fun-level\" style=\"color: red;\">0 %<\/span>.<\/p>\r\nvar percent_number_step = $.animateNumber.numberStepFactories.append(' %')\r\n$('#fun-level').animateNumber(\r\n {\r\n number: 100,\r\n color: 'green',\r\n 'font-size': '30px',\r\n easing: 'easeInQuad',\r\n numberStep: percent_number_step\r\n },\r\n 15000\r\n);<\/pre>\n
 <\/p>\n
\u5b9e\u4f8b\u56db\u3001\u81ea\u5b9a\u4e49\u6570\u5b57\u6b65\u9636\u5904\u7406\u65b9\u6cd5\uff08\u53e5\u67c4\uff09<\/p>\n
$('#points').animateNumber(\r\n {\r\n   number: 72,\r\n   numberStep: function(now, tween) {\r\n   var target = $(tween.elem);\r\n   target\r\n    .prop('number', now) \/\/ keep current prop value\r\n    .text(now);\r\n   }\r\n }\r\n);<\/pre>\n
 <\/p>\n
\u5b9e\u4f8b\u4e94\u3001\u5b9a\u4e49\u52a8\u753b\u6570\u5b57\u7684\u5f00\u59cb\u6570\u636e\uff0c\u4e0b\u9762\u5b9e\u4f8b\u5b9a\u4e49\u7684\u662f\u4ece10\u5230100\u6570\u636e\u7684\u53d8\u5316<\/span><\/p>\n
<p id=\"ten\">From ten to hundred.<\/p>\r\n \r\n$('#ten')\r\n   .prop('number', 10)\r\n   .animateNumber(\r\n   {\r\n     number: 100\r\n   },\r\n   20000\r\n);<\/pre>\n
 <\/p>\n
\u5b9e\u4f8b\u516d\u3001\u5e26\u5c0f\u6570\u4f4d<\/p>\n
<<\/code>p<\/code>\u00a0id<\/code>=<\/code>\"decimals\"<\/code>>From\u00a0$0,00\u00a0to\u00a0$5,00<\/<\/code>p<\/code>><\/code><\/div>\n
<\/div>\n
\/\/\u00a0\u9700\u8981\u4fdd\u7559\u7684\u5c0f\u6570\u4f4d\u6570<\/code><\/div>\n
var\u00a0decimal_places\u00a0=\u00a02;<\/code><\/div>\n
var\u00a0decimal_factor\u00a0=\u00a0decimal_places\u00a0===\u00a00\u00a0?\u00a01\u00a0:\u00a0decimal_places\u00a0*\u00a010;<\/code><\/div>\n
<\/div>\n
$('#decimals')<\/code><\/div>\n
\u00a0\u00a0<\/code>.animateNumber(<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>{<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>number:\u00a05\u00a0*\u00a0decimal_factor,<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>numberStep:\u00a0function(now,\u00a0tween)\u00a0{<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>var\u00a0floored_number\u00a0=\u00a0Math.floor(now)\u00a0\/\u00a0decimal_factor,<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>target\u00a0=\u00a0$(tween.elem);<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>if\u00a0(decimal_places\u00a0>\u00a00)\u00a0{<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\/\/\u00a0force\u00a0decimal\u00a0places\u00a0even\u00a0if\u00a0they\u00a0are\u00a00<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>floored_number\u00a0=\u00a0floored_number.toFixed(decimal_places);<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\/\/\u00a0replace\u00a0'.'\u00a0separator\u00a0with\u00a0','<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>floored_number\u00a0=\u00a0floored_number.toString().replace('.',\u00a0',');<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>target.text('$'\u00a0+\u00a0floored_number);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>},<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>20000<\/code><\/div>\n
\u00a0\u00a0<\/code>);<\/code><\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
\u5b9e\u4f8b\u4e03\u3001\u5012\u8ba1\u65f6\uff0c\u4ee5\u4e0b\u4ee3\u7801\u4e3a\u4ece10\u5012\u6570\u52300<\/div>\n
<p id=\"revese-countdown\">10<\/p>\r\n \r\n$('#revese-countdown')\r\n   .prop('number', 10)\r\n   .animateNumber(\r\n    {\r\n      number: 0,\r\n      numberStep: function(now, tween) {\r\n      var target = $(tween.elem),\r\n      rounded_now = Math.round(now);\r\n \r\n      target.text(now === tween.end ? 'Launch!' : rounded_now);\r\n      }\r\n   },\r\n   10000,\r\n  'linear'\r\n );<\/pre>\n
http:\/\/www.jqcool.net\/animate-number.html<\/a><\/p>\n
http:\/\/www.jq22.com\/jquery-info3030<\/a><\/p>\n
https:\/\/github.com\/aishek\/jquery-animateNumber<\/a><\/p>\n
 <\/p>\n
—————————————————————————————————-<\/p>\n
\u8fd8\u6709\u7b80\u5355\u7684\u65b9\u6cd5\u652f\u6301\u5c0f\u6570\u70b9\uff0c\u8fd8\u53ef\u4ee5\u81ea\u52a8\u8fdb\u884c\u91d1\u94b1\u683c\u5f0f\u5316\uff0c\u8fd8\u6709\u6570\u5b57\u52a8\u753b\u6548\u679c\u3002<\/p>\n
\u6548\u679c\uff1ahttps:\/\/sdeno.com\/wp-content\/uploads\/2016\/09\/countTo\/1.html<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u4e0b\u8f7d\uff1anum_aniamte \u6570\u5b57\u8fc7\u6e21 \u6570\u5b57\u52a8\u753b \u6570\u5b57 animate \u6570\u5b57\u9012\u589e \u6570\u5b57\u9012\u52a0 \u6570\u5b57\u7684\u8fc7\u5ea6\u6548\u679c\u517c\u5bb9 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-3693","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/3693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3693"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/3693\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}