在文本框中设置同心圆

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

实现同心圆的基本结构

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

HTML结构：

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 根据输入框的值动态调整圆圈的大小。

Kuwebs企业网站管理系统3.1.5 UTF8

酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描

下载

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时，弹出警告框，并阻止后续操作。

解决动态更新问题

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

1. 事件绑定位置： 确保事件监听器在 DOM 加载完成后绑定。可以将代码放在 $(function() { ... }); 中，或者将