jQuery绘制圆形功能如何正确识别用户输入的小数值

小数被截断为整数的核心原因是代码使用 parseInt() 解析输入值：parseInt() 只会将输入解析为整数，解析到小数点这类非整数字符时就会终止，直接返回已解析的整数部分，因此输入5.68时仅会得到5。

将两处获取输入值的 parseInt() 替换为 parseFloat() 即可，parseFloat() 方法可以正确解析带小数的浮点数，不会截断小数部分。
修改后的可运行代码：

$(function() {
  $('.circle').hide();
  $('#outer_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val());
    // 非数字输入拦截（可选优化）
    if (isNaN($outer_diameter)) {
      $('#error').show();
      return;
    }
    var $converted = $outer_diameter * 10;
    console.log($outer_diameter, $converted);
    $('.circle').css({
      height: 2 * $converted,
      width: 2 * $converted,
      top: "calc(50% - " + $converted + "px)",
      left: "calc(50% - " + $converted + "px)"
    });
    $('.circle').fadeIn(300);
    $('#error').hide();
  })

  $('.circle2').hide();
  $('#inner_diameter').on('change', function() {
    var $inner_diameter = parseFloat($("#inner_diameter").val());
    // 非数字输入拦截（可选优化）
    if (isNaN($inner_diameter)) return;
    var $converted_2 = $inner_diameter * 10;
    console.log($inner_diameter, $converted_2);
    $('.circle2').css({
      height: 2 * $converted_2,
      width: 2 * $converted_2,
      top: "calc(50% - " + $converted_2 + "px)",
      left: "calc(50% - " + $converted_2 + "px)"
    });
    $('.circle2').fadeIn(300);
  })
});

代码中新增的非数字输入拦截是可选优化项，用来避免用户输入非数值内容时出现渲染异常，不需要可以直接删除。

内容的提问来源于stack exchange，提问作者Kaevonz