最简单的方法来编辑“捐赠温度计”

Question

I am trying to think of the best way to make a really small thermometer image, that can be easily edited by typing in a number (dollar value) and having the image change based on the value.

The simplest way to achieve this is the best. It will be going online onto a site that is using a CMS called spip.

Does anything small like this exist? and if i have to create it myself what's the best way to go about it?

Answer 1

The basic concept here is very simple; check out this fiddle. It's a basic nested div:

<div id='thermometer'>
    <div id='level'>
    </div>
</div>

which takes input from some form element:

<input type='text' id='fill'>

and some simple styling:

#thermometer { height: 15px; width: 100px; margin:5px; padding:0; border: #cccccc solid 1px; }
#level { height: 15px; width: 40px; margin: 0; padding:0; border-right: 1px solid #666666; background: #ffcccc; }

and a tiny bit of javascript:

$('#fill').keyup(function() {
    $('#level').css('width',this.value);
});

Granted, this has no error checking, and could use a lot more work to make it robust, but it does what you ask it to do.