如何在动态值旁边显示温度和百分比符号

Question

我有两个问题。

1. 如何在动态值旁边的旋钮内显示温度符号。
2. 如何在动态值旁边的旋钮内显示百分比 (%) 符号。

我正在使用<input> 标签和 Knob JS。

HTML

<div class="progress-box text-center">
    <input type="text" class="knob temperature" data-width="120" data-height="120" data-thickness="0.40" data-fgColor="#000000" readonly>
    <h5 class="text-light-blue padding-top-10 weight-500">Temperature</h5>
</div>

<div class="progress-box text-center">
    <input type="text" class="knob water_level"  data-width="120" data-height="120" data-thickness="0.40" data-fgColor="#000000" readonly>
    <h5 class="text-light-blue padding-top-10 weight-500">Water Level</h5>
</div>

JS

$('.temperature').knob();
$('.temperature').attr('data-fgColor', '#11E117');

$.get(('assets/summary/temperature.php'),  // url
     function (data, textStatus, jqXHR) {  // success callback
         console.log(data);
         $({animatedVal: 0}).animate({animatedVal: data}, {
         duration: 3000,
         easing: "swing",
         step: function() {
             var val = Math.ceil(this.animatedVal);
             $(".temperature").trigger('configure', {
             'fgColor': colors[(val < 40) ? 0 : (val < 70) ? 1 : 2]
             }).val(val).trigger("change");
             return val + '%';      // I tried to apply this but not happen
         }
     });
 });

Answer 1

您是否尝试过在var val = Math.ceil(this.animatedVal); 中添加字符串？像这样：var val = Math.ceil(this.animatedVal) + ' %'; 然后返回 val;

对此进行了编辑：

尝试将return val + '%'; 替换为var newVal = val + ' %'; $('.temperature').val(newVal);。

要添加临时符号，而不是 ℃，请尝试添加 String.fromCharCode(176) 像这样：val + String.fromCharCode(176);