使用查询或javascipt显示格式号，例如："27.0 °C"。

Question

我和几个朋友正在尝试一个小的物联网项目，其中的控制是在一个网站上处理，在手机上使用。

因此，基本上，我们有一个范围滑块，用于控制一个房间的所需温度。一个Arduino从那里进行温度的实际处理。我们已经掌握了数据库，Arduino和数据库之间的通信，但这个问题，我们不能处理出来的自己。

所以，我们之前并没有真正用javascript来处理。我们尝试了很多不同的技术，但正如我所说，我们远不是专家。

我们找到了javascript代码，（如下图所示）在 此处.

现在，滑块工作得很好，并显示所选的值。我们想要的是，将数字格式化，使其显示为 1 小数，并包含结尾的" °C" 因此，它显示的是 "26"，而不是 "26"。"26.0 °C".

在下面的HTML代码中，我排除了与bootstrap相关的非重要类，以便更好地了解情况。

HTML代码

<div>
    <form method="post">
        <span class="valueSpan"></span>
        <input id="slider11" name="temp_sub" value="<?php echo $temp; ?>" step="0.5" type="range" min="10" max="35" />
        <button type="submit">Submit</button>
    </form>
</div>

Javascript

<script>
$(document).ready(function() {

  const $valueSpan = $('.valueSpan');
  const $value = $('#slider11');
  $valueSpan.html($value.val());
  $value.on('input change', () => {

    $valueSpan.html($value.val());
  });
});
</script>

照片。温度范围滑块的照片

Answer 1

使用toFixed()并添加 ºC

$(document).ready(function() {

  const $valueSpan = $('.valueSpan');
  const $value = $('#slider11');
  $valueSpan.html($value.val());
  $value.on('input change', () => {

    $valueSpan.html((+$value.val()).toFixed(1) + 'ºC');
  }).change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form method="post">
    <span class="valueSpan"></span>
    <input id="slider11" name="temp_sub" value="20" step="0.5" type="range" min="10" max="35" />
    <button type="submit">Submit</button>
  </form>
</div>