码迷,mamicode.com
首页 > Web开发 > 详细

countUp.js

时间:2017-12-12 17:31:33      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:seo   onload   robert   ext   nload   func   sele   col   详细   

项目链接:http://inorganik.github.io/countUp.js

countUp.js网上教程已经有很多了,但很多只是提供了一个接口方法,现在做个详细的说明,便于新手快速如梦。

导入countUp.js

HTML语句:

<span id="dayCar" style="font-size: 28px;color: yellow;" >0</span>

js代码:

window.onload = function () {
            startDayCar();

        };
        function startDayCar(){
            
            var options = {
                useEasing: true, 
                useGrouping: true, 
                separator: ‘,‘, 
                decimal: ‘.‘, 
            };
            var demo = new CountUp(‘dayCar‘, 0, 25, 0, 2.5, options);
            if (!demo.error) {
                demo.start();
            } else {
                console.error(demo.error);
            }
        }

CountUp对象5个差数对应

target = id of html element or var of previously selected html element where counting occurs
startVal = the value you want to begin at
endVal = the value you want to arrive at
decimals = number of decimal places, default 0
duration = duration of animation in seconds, default 2
options = optional object of options (see below)

Options 

useEasing: true, // toggle easing
useGrouping: true, // 1,000,000 vs 1000000
separator: ‘,‘, // character to use as a separator
decimal: ‘.‘, // character to use as a decimal
easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner‘s easeOutExpo
formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
prefix: ‘‘, // optional text before the result
suffix: ‘‘, // optional text after the result
numerals: [] // optionally pass an array of custom numerals for 0-9

 

countUp.js

标签:seo   onload   robert   ext   nload   func   sele   col   详细   

原文地址:http://www.cnblogs.com/congyu/p/8028437.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!