zoukankan      html  css  js  c++  java
  • countUp.js

    项目链接: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

  • 相关阅读:
    总结CSS3新特性(颜色篇)
    JavaScript的一些小技巧(转)
    CSS3中的calc()
    使用 Google Guava 美化你的 Java 代码
    Hibernate Validator验证标签说明
    SQL语法粗整理
    DruidDataSource配置属性列表
    IntelliJ Idea 常用快捷键列表
    curl命令使用(转)
    spring纯java注解式开发(一)
  • 原文地址:https://www.cnblogs.com/congyu/p/8028437.html
Copyright © 2011-2022 走看看