Question

我正在做一个周长/面积计算器。用户输入的是圆的半径，我正在设置此值，以便在创建圆的可视化效果时可以是宽度和高度，但是图形未居中，并且位置不断变化。我怀疑这是因为圆的宽度与根据用户的变化而变化的宽度不同，所以它不会保持居中。

输入

<input type="number" id="radius" placeholder="Enter the radius">

圆的div

<div class="circles">
      <span class="circle"></span>
    </div>

JQuery

      const $radius = $("#radius").val();
      const $diameter = ($radius * 2);
      const $radioPick = $("input[name='calculation']:checked").val();
      const $converted = ($radius * 37.795275591);


$('.circle').css({
          height: $converted,
          width: $converted
        });

CSS

.circle {
  border: 1px rgba(0, 0, 0, 0.2) solid;
  background-color: rgba(192, 192, 192, 0.3);
  border-radius: 50%;
  position: fixed;
  z-index: -1;
  left: 50%;
  top: 50%;
}

$(document).ready(function() {

  $('.circle').hide();

  $('#radius').on('keyup', () => {
    const $radius = $("#radius").val();
    const $diameter = ($radius * 2);
    const $radioPick = $("input[name='calculation']:checked").val();
    const $converted = ($radius * 37.795275591);

    if ($radius < 0) {
      $('#error').text('Please input positive integers');
      return false;

    } else if ($radioPick === "area") {
      const $acalc = ($radius * $radius * Math.PI).toPrecision(6);
      $('#feedback').text('Area = ' + $acalc + ' cm\u00B2');
      $('#diameter').text('Diameter = ' + $diameter + ' cm\u00B2');
      $('.circle').css({
        height: $converted,
        width: $converted
      });
      $('.circle').fadeIn(300);
      $('#error').hide();

    } else if ($radioPick === "circuference") {
      const $circalc = (2 * Math.PI * $radius).toPrecision(6);
      $('#feedback').text('Circunference = ' + $circalc);
      $('#diameter').text('Diameter = ' + $diameter);
      $('.circle').css({
        height: (2 * $converted),
        width: (2 * $converted)
      });
      $('.circle').fadeIn(300);
      $('#error').hide();
    }
  })
});

body {
  margin: 0 auto;
  font-family: Helvetica, sans-serif;
}

.wrapper {
  height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.title h1 {
  font-weight: lighter;
  font-size: 50px;
  /* top: 5%; */
  /* left: 35%; */
}

#radius {
  padding: 5px;
  margin: 10px;
}

#bttn {
  border: none;
  font-size: 15px;
  padding: 5px;
  border-radius: 3px;
  background-color: lightgrey;
  border: 0.5px black solid;
}

.calculations {}

input[type="radio"] {
  cursor: pointer;
}

input[type="radio"],
label {}

.answer {
  margin: 50px;
  width: 200px;
  height: 100px;
}

.answer p {
  font-weight: bold;
  font-size: 18px;
}

.circle {
  border: 1px rgba(0, 0, 0, 0.2) solid;
  background-color: rgba(192, 192, 192, 0.3);
  border-radius: 50%;
  position: fixed;
  z-index: -1;
  left: 50%;
  top: 50%;
}

#error {
  color: red;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</script>
<div class="wrapper">
  <div class="title">
    <h1>Circles Calculator</h1>
  </div>
  <div class="calculations">
    <input type="radio" name="calculation" value="area"><label> Area</label><br />
    <input type="radio" name="calculation" value="circuference"><label> Circuference</label><br />
    <input type="number" id="radius" placeholder="Enter the radius">
    <input type="button" id="bttn" name="calculate" value="Calculate">
  </div>
  <div class="answer">
    <p id="feedback"></p>
    <p id="diameter"></p>
    <p id="error"></p>
  </div>
  <div class="circles">
    <span class="circle"></span>
  </div>
</div>

我想做的是：根据输入内容制作一个完全位于屏幕中心的圆/更改大小，但不会移动

Answer 1

诀窍是一些CSS Magic。您需要像调整//*[@id="heading"] [wildcard for the random ID and divs] /div[3]/div/div/div[2]和top一样动态调整left中的.circle和width。我们利用CSS3 height属性。在计算面积时考虑：

calc()

或周长：

$('.circle').css({
  height: $converted,
  width: $converted,
  top: "calc(50% - " + ($converted/2) + "px)",
  left: "calc(50% - " + ($converted/2) + "px)"
});

现在$('.circle').css({ height: $converted, width: $converted, top: "calc(50% - " + $converted + "px)", left: "calc(50% - " + $converted + "px)" });和top的计算将是圆的半径的50％，并使其中心位于页面的中心。

工作示例：https://jsfiddle.net/Twisty/cgLfz1ro/

您可能还会考虑其他一些小的更改。就像进行检查以确保用户已选择“区域”或“周长”，如果未选择则生成错误。

希望有帮助。

Answer 2

我自由选择了代码，以在未选择任何类型时显示错误。我还为数字输入添加了一个更改事件处理程序，因为keyup不会处理数字的情况，因此我还设置了min='0'来避免某些错误。我为无线电更改添加了事件处理程序，因此，如果他们在此发生错误，请通过选择进行修复，从而触发计算。 CSS对实际问题进行了更新。

$(function() {
  $("input[type='radio'][name='calculation']").on('change', function() {
    $('#error').hide();
    $('#radius').trigger('change');
  });
  $('#radius').on('keyup change', function() {
    //$('#error').hide();
    const $radius = $(this).val();
    const $diameter = ($radius * 2);
    const $radio = $("input[type='radio'][name='calculation']:checked");
    const $radioPick = $radio.val();
    const $converted = ($radius * 37.795275591);
    var fbtext = "";
    var diText = "";
    var circCss = 0;

    if ($radius < 0) {
      $('#error').text('Please input positive integers').show();
      return false;
    }
    if (!$radio.length > 0) {
      //console.log('radiobad');
      $('#error').text('Please choose a type').show();
      return false;
    }
    if ($radioPick === "area") {
      const $acalc = ($radius * $radius * Math.PI).toPrecision(6);
      fbtext = 'Area = ' + $acalc + ' cm\u00B2';
      diText = 'Diameter = ' + $diameter + ' cm\u00B2';
      circCss = $converted;
    }
    if ($radioPick === "circuference") {
      const $circalc = (2 * Math.PI * $radius).toPrecision(6);
      fbtext = 'Circunference = ' + $circalc;
      diText = 'Diameter = ' + $diameter;
      circCss = (2 * $converted);
    }
    $('.circle').css({
      height: circCss,
      width: circCss
    });
    $('#feedback').text(fbtext);
    $('#diameter').text(diText);
    $('.circle').fadeIn(300);
    $('#error').hide();
  });
});

body {
  margin: 0 auto;
  font-family: Helvetica, sans-serif;
}

.wrapper {
  height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.title h1 {
  font-weight: lighter;
  font-size: 50px;
  /* top: 5%; */
  /* left: 35%; */
}

#radius {
  padding: 5px;
  margin: 10px;
}

#bttn {
  border: none;
  font-size: 15px;
  padding: 5px;
  border-radius: 3px;
  background-color: lightgrey;
  border: 0.5px black solid;
}

.calculations {}

input[type="radio"] {
  cursor: pointer;
}

input[type="radio"],
label {}

.answer {
  margin: 50px;
  width: 200px;
  height: 100px;
}

.answer p {
  font-weight: bold;
  font-size: 18px;
}

.circle {
  border: 1px rgba(0, 0, 0, 0.2) solid;
  background-color: rgba(192, 192, 192, 0.3);
  border-radius: 50%;
  position: fixed;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#error {
  color: red;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</script>
<div class="wrapper">
  <div class="title">
    <h1>Circles Calculator</h1>
  </div>
  <div class="calculations">
    <input type="radio" name="calculation" value="area"><label>Area</label><br />
    <input type="radio" name="calculation" value="circuference"><label>Circuference</label><br />
    <input type="number" min="0" id="radius" placeholder="Enter the radius">
    <input type="button" id="bttn" name="calculate" value="Calculate">
  </div>
  <div class="answer">
    <p id="feedback"></p>
    <p id="diameter"></p>
    <p id="error"></p>
  </div>
  <div class="circles">
    <span class="circle"></span>
  </div>
</div>

如何完美地使根据用户输入而变化的圆居中

2 个答案: