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

我在这里有2个问题。

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

我正在使用<input>标签和旋钮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
         }
     });
 });
peggyxin 回答:如何在动态值旁边显示温度和百分比符号

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

编辑为此:

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

要添加临时符号而不是&#8451;,请尝试添加String.fromCharCode(176) 像这样:val + String.fromCharCode(176);

本文链接:https://www.f2er.com/3169367.html

大家都在问