Animate number changes step by step (e.g. "1.1" -> "1.2" -> "1.3") with CoffeeScript and jQuery. And some other methods around number formatting.

examples.coffee

# Examples

console.log NumberWrangler.format(123456.78)
console.log NumberWrangler.format("1234")
console.log NumberWrangler.formatDecimalComma("123456.78")
console.log NumberWrangler.parse("123,4 56.78")
console.log NumberWrangler.parseDecimalComma("123.4 56,78")
console.log NumberWrangler.countDecimals(1.2345)

# Requires jQuery:
# Reads the number displayed inside .foo_count and changes the value to 456,
# step by step over the given duration, with the given easing.

NumberWrangler.changeNumber ".foo_count", 456, duration: 1000, easing: "linear"
NumberWrangler.changeNumber ".foo_count", 456.78, decimalComma: true

number_wrangler.coffee

class NumberWrangler

  @changeNumber: (element, newNumber, opts={}) ->
    duration = opts.duration || 500  # ms
    easing = opts.easing || "swing"

    if opts.decimalComma
      parser = @parseDecimalComma
      formatter = @formatDecimalComma
    else
      parser = @parse
      formatter = @format

    $e = jQuery(element)
    oldNumber = parser $e.text()
    newNumber = @parse newNumber

    decimals = Math.max @countDecimals(oldNumber), @countDecimals(newNumber)

    jQuery(value: oldNumber).animate(
      { value: newNumber },
      {
        duration: duration,
        easing: easing,
        step: (value) =>
          $e.text formatter(@round(value, decimals))
        complete: =>
          $e.text formatter(@round(newNumber, decimals))
      }
    )

  @format: (stringOrNumber, thousandsSeparator=",", decimalSeparator=".") ->
    string = stringOrNumber + ""
    [int, dec] = string.split('.')
    dec = if dec then decimalSeparator + dec else ""
    re = /(\d+)(\d{3})/
    while re.test(int)
      int = int.replace(re, '$1' + thousandsSeparator + '$2')
    int + dec

  @formatDecimalComma: (stringOrNumber) ->
    NumberWrangler.format stringOrNumber, ".", ","

  @parse: (stringOrNumber) ->
    string = stringOrNumber + ""
    parseFloat(string.replace(/[^\d\.-]/g, ''), 10) || 0

  @parseDecimalComma: (string) ->
    string = string.replace(/\./, '').replace(",", ".")
    NumberWrangler.parse(string)

  @countDecimals: (number) ->
    string = number + ""
    decimalPart = string.split(".")[1] || ""
    decimalPart.length

  @round: (number, decimals=0) ->
    pow = Math.pow(10, decimals)
    Math.round(number * pow) / pow