在文本框中设置同心圆-html教程-PHP中文网

在文本框中设置同心圆

碧海醫心

发布： 2025-09-27 18:23:00

原创

834人浏览过

在文本框中设置同心圆

本文旨在解决如何在网页文本框内创建和控制同心圆的问题。通过修改CSS样式，将圆圈定位在文本框内，并利用JavaScript动态调整圆圈大小。同时，提供限制用户输入值的示例，以及解决动态更新圆圈大小的问题，确保圆圈始终与输入值保持同步。

实现同心圆的基本结构

首先，我们需要一个容器（.circles）来包含两个圆圈（.circle 和 .circle2）。通过CSS控制它们的样式和位置，确保它们是同心的。

HTML结构：

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

登录后复制

CSS样式：

.circles {
  margin-top: 15px;
  position: relative; /* 关键：相对定位 */
  /* 可以设置固定宽度和高度，限制圆圈的最大尺寸 */
  width: 200px;
  height: 200px;
}

.circle {
  display: inline-block;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
  z-index: -1;
  left: 50%;
  top: 50%;
  position: absolute; /* 关键：绝对定位 */
  transform: translate(-50%, -50%); /* 关键：保证圆心对齐 */
}

.circle2 {
  display: inline-block;
  position: absolute; /* 关键：绝对定位 */
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: red;
  background-color: rgba(0, 0, 0, 0);
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 关键：保证圆心对齐 */
}

登录后复制

关键点在于：

.circles 使用 position: relative，作为定位上下文。
.circle 和 .circle2 使用 position: absolute，相对于 .circles 定位。
transform: translate(-50%, -50%) 用于精确地将圆心放置在 .circles 的中心。

使用 JavaScript 动态调整圆圈大小

接下来，我们使用 JavaScript 根据输入框的值动态调整圆圈的大小。

JavaScript代码：

百度文心百中

百度大模型语义搜索体验中心

查看详情

$(function() {
  $('.circle').hide();
  $('#outer_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);

    // 限制输入值
    if ($outer_diameter >= 85) {
      alert("输入值太大！");
      return; // 阻止后续操作
    }

    var $converted = ($outer_diameter * 10).toFixed(3);
    console.log($outer_diameter, $converted);
    $('.circle').css({
      height: (2 * $converted),
      width: (2 * $converted),
    });
    $('.circle').fadeIn(300);

    // 调整 .circles 的尺寸，确保圆圈不超出容器
    $('.circles').css({
        height:(2 * $converted) + 10,
        width: (2 * $converted) + 10
    });

    $('#error').hide();
  })

  $('.circle2').hide();
  $('#inner_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $inner_diameter = parseFloat($("#inner_diameter").val()).toFixed(3);
    var $converted_2 = (($outer_diameter * 10) - ($inner_diameter * 10)).toFixed(3);
    console.log($inner_diameter, $converted_2);
    $('.circle2').css({
      height: (2 * $converted_2),
      width: (2 * $converted_2),
    });
    $('.circle2').fadeIn(300);
  })
});

登录后复制

关键点：

使用 jQuery 的 on('change', function() { ... }) 监听输入框的值变化。
parseFloat() 用于将输入值转换为浮点数。
toFixed(3) 用于保留三位小数。
.css() 方法用于动态设置圆圈的 height 和 width 属性。
在改变圆圈尺寸的同时，也要改变 .circles 的尺寸，防止圆圈溢出容器。
添加输入值限制，当输入值大于等于85时，弹出警告框，并阻止后续操作。

解决动态更新问题

如果圆圈大小没有随着输入值改变而更新，可能是因为事件监听器没有正确绑定。确保以下几点：

事件绑定位置： 确保事件监听器在 DOM 加载完成后绑定。可以将代码放在 $(function() { ... }); 中，或者将 <script> 标签放在 </body> 之前。
事件类型： 使用 change 事件监听输入框的值变化。
动态生成元素： 如果输入框是动态生成的，需要使用事件委托。例如：
```
$(document).on('change', '#outer_diameter', function() {
  // ...
});
```
登录后复制