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

Question

我试图想出制作一个非常小的温度计图像的最佳方法,可以通过键入数字(美元值)并根据值更改图像来轻松编辑.

实现这一目标的最简单方法是最好的.它将上线到使用名为spip的CMS的网站上.

有这样小的东西存在吗？如果我必须自己创造什么是最好的方法呢？

Answer 1

这里的基本概念非常简单; 看看这个小提琴.这是一个基本的嵌套div:

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

从某个表单元素获取输入:

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

和一些简单的造型:

#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; }

还有一点点javascript:

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

当然,这没有错误检查,并且可以使用更多的工作来使其健壮,但它会按照您的要求执行.