order of magnitude

HTML

<div id="output"></div>

CSS

.num {
    width: 40%;
    background: #cccccc;
    display: inline-block;
    text-align: right;
    padding: 0 4px;
}
.mag {
    width: 40%;
    background: #999999;
    display: inline-block;
    padding: 0 4px;
}

JavaScript

var magnitude = function (n) {
    var log10 = function (val) {
        return Math.log(val) / Math.LN10;
    }
    if (n === 0) {
        return 1;
    }
    var negative = n < 0;
    var log = log10(Math.abs(n));
    var decimalPlaces = ((log > 0)) ? (Math.ceil(log)) : (Math.floor(log) + 1);
    var rounded = Math.pow(10, decimalPlaces);
    return negative ? -rounded : rounded;
};

var test = [0.0023, 0.045, 0.33, 1.22, 12.33, 230, 3695, 1504867];

$.each(test, function (index, n) {
    var $div = $('<div/>');
    var $num = $('<span/>').addClass('num').text(n);
    var $mag = $('<span/>').addClass('mag').text(magnitude(n));
    $div.append($num).append($mag);
    $('#output').append($div);
});