Question

我正在考虑制作一个非常小的温度计图像的最佳方法，可以通过键入数字（美元值）并根据值更改图像来轻松编辑。

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

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

Answer 1

这里的基本概念非常简单;看看this fiddle。这是一个基本的嵌套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);
});

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

Answer 2

第二层div，每个都有温度计图像的一部分，并隐藏red indicator bit div的部分。

Answer 3

html 5 canvas + jquery或者，一个不同的简单方法是使用div，一个在另一个上面来模拟温度计的水平。并在值增加或减少时简单地将背景更改为红色

Answer 4

没有示例，只是PHP + CSS解决方案的一些简单步骤。

使用PHP计算达到目标的百分比。
使用此百分比计算CSS background-position属性，通过设置与PHP内联的style属性来显示更多或更少的温度计背景图像。

更新

对于那些用PHP做这件事的人来说，你怎么看待JavaScript开始的价值？如果PHP生成页面输出并计算值，则直接使用PHP输出style是完全可以接受的，并将其保留在源。

Answer 5

这样的事情应该有效：

<?php
    $goal = 100; // need to raise $100
    $done = 78; // got $78 so far, e.g. 78% done
    $full_size = '200'; // 200px
?>
<style type="text/css">
    #thermometer {
        width: <?php echo floor($full_size * ($done / $goal)) ?>px;
        height: 1em;
        color: red;
    }
</style>

<div id="thermometer"></div>

Answer 6

创建一个小文本输入表单元素，用户可以输入一个美元金额。使用jQuery并挂钩该元素的onblur事件，并在该钩子中，根据需要重绘图像，缩放和全部。

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

6 个答案:

更新