时间戳

首页 > 解决方案 > 如何完美地居中一个根据用户输入而变化的圆

jquery - 如何完美地居中一个根据用户输入而变化的圆

问题描述

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

输入

<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>

我想要做的是：制作一个在屏幕上完全居中的圆圈/根据输入更改大小但不移动

标签： jqueryhtmlcss

解决方案

诀窍是一点 CSS Magic。您需要像使用 and 一样动态地调整您的andtop为带有classleft的元素。我们利用 CSS3属性。在计算面积时考虑：circlewidthheightcalc()

$('.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)"
});

现在topandleft将被计算为 50% - 圆的半径，保持它的中心在页面的中心。

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

您还可以考虑一些其他小的更改。就像检查以确保用户选择了区域或周长，如果他们没有选择则生成错误。

推荐阅读