Preview Download

Images

The easy way to create something like this is to use images, you can use a custom font but that would require more bandwidth. I wanted this to load as quickly as possible. Image Sprites are your friends.

HTML

All you need to do is then create divs where all the digits will be. These divs will have css background images attached to them that you can change using Javascript

CSS

#scale_display { width:252px; height:91px; background:url(Images/display_scale.png)}

#scale_display #before_point { margin:16px 0 0 18px; position:fixed}
#scale_display #digit_1 { height:59px; width:35px; float:left}
#scale_display #digit_2 { margin-left:6px; height:59px; width:35px; float:left}
#scale_display #digit_3 { margin-left:6px; height:59px; width:35px; float:left}
#scale_display #digit_4 { margin-left:6px; height:59px; width:35px; float:left}

#scale_display #digit_5 { margin:43px 0 0 9px; height:17px; width:10px; float:left}
#scale_display #digit_6 { margin:43px 0 0 2px; height:17px; width:10px; float:left}

#scale_display #type { margin:0px 0 0 10px; height:16px; width:22px; float:left}
#scale_display .t1 { background:url(Images/display_scale_digits.png) -211px -64px;}
#scale_display .t2 {background:url(Images/display_scale_digits.png) -222px -64px; margin:20px 0 0 20px !important; width:11px !important}


#scale_display .n0 {background:url(Images/display_scale_digits.png)}
#scale_display .n1 {background:url(Images/display_scale_digits.png) -42px 0px}
#scale_display .n2 {background:url(Images/display_scale_digits.png) -90px 0px}
#scale_display .n3 {background:url(Images/display_scale_digits.png) -131px 0px}
#scale_display .n4 {background:url(Images/display_scale_digits.png) -169px 0px}
#scale_display .n5 {background:url(Images/display_scale_digits.png) -212px 0px}
#scale_display .n6 {background:url(Images/display_scale_digits.png) -253px 0px}
#scale_display .n7 {background:url(Images/display_scale_digits.png) -292px 0px}
#scale_display .n8 {background:url(Images/display_scale_digits.png) -333px 0px}
#scale_display .n9 {background:url(Images/display_scale_digits.png) -374px 0px}

#scale_display .d0 {background:url(Images/display_scale_digits.png) -190px -63px;}
#scale_display .d1 {background:url(Images/display_scale_digits.png) 6px -63px;}
#scale_display .d2 {background:url(Images/display_scale_digits.png) -22px -63px;}
#scale_display .d3 {background:url(Images/display_scale_digits.png) -43px -63px;}
#scale_display .d4 {background:url(Images/display_scale_digits.png) -64px -63px;}
#scale_display .d5 {background:url(Images/display_scale_digits.png) -85px -63px;}
#scale_display .d6 {background:url(Images/display_scale_digits.png) -106px -63px;}
#scale_display .d7 {background:url(Images/display_scale_digits.png) -127px -63px;}
#scale_display .d8 {background:url(Images/display_scale_digits.png) -148px -63px;}
#scale_display .d9 {background:url(Images/display_scale_digits.png) -169px -63px;}

Javascript

In my example, I am using a slider. You would have to replace that with your own code to make this actually work in a live situation. What I am doing here is splitting the numbers up and then showing that number on their respective divs.

$(document).ready(function(e) {
	function changeDisplay(number) {
    if (number > 999.99) {
        number = number / 1000;
        $('#type').removeClass().addClass('t1');
    } else {
        $('#type').removeClass().addClass('t2');
    }
    var numberString = number.toString();
    var splitNumbers = numberString.split('.');
    var n = splitNumbers[0];
    var d = splitNumbers[1];
    var splitn = splitNumbers[0].split('');
    if (splitNumbers[1]) {
        var splitd = splitNumbers[1].split('');
    } else {
        var splitd = new Array();
    }
    var numberOfNumbers = splitn.length;
    if (numberOfNumbers == 4) {
        var digit1 = splitn[0];
        var digit2 = splitn[1];
        var digit3 = splitn[2];
        var digit4 = splitn[3];
    }
    if (numberOfNumbers == 3) {
        var digit1 = null;
        var digit2 = splitn[0];
        var digit3 = splitn[1];
        var digit4 = splitn[2];
    }
    if (numberOfNumbers == 2) {
        var digit1 = null;
        var digit2 = null;
        var digit3 = splitn[0];
        var digit4 = splitn[1];
    }
    if (numberOfNumbers == 1) {
        var digit1 = null;
        var digit2 = null;
        var digit3 = null;
        var digit4 = splitn[0];
    }
    if (numberOfNumbers == 0) {
        var digit1 = null;
        var digit2 = null;
        var digit3 = null;
        var digit4 = 0;
    }
    if (splitd[0]) {
        var decimal1 = splitd[0];
    } else {
        var decimal1 = 0;
    }
    if (splitd[1]) {
        var decimal2 = splitd[1];
    } else {
        var decimal2 = 0;
    }
    $('#digit_1').removeClass().addClass("n" + digit1);
    $('#digit_2').removeClass().addClass("n" + digit2);
    $('#digit_3').removeClass().addClass("n" + digit3)
    $('#digit_4').removeClass().addClass("n" + digit4);
    $('#digit_5').removeClass().addClass("d" + decimal1);
    $('#digit_6').removeClass().addClass("d" + decimal2);
}
$('#input').change(function () {
    input = $(this).val();
    changeDisplay(input);
});
	
});

Preview Download