本文旨在解决如何在网页文本框内创建和控制同心圆的问题。通过修改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() { // ... });
注意事项和总结
- 性能优化： 频繁地改变 DOM 元素可能会影响性能。如果需要处理大量的圆圈，可以考虑使用 Canvas 或 SVG。
- 响应式设计： 在不同的屏幕尺寸下，圆圈的大小可能会受到影响。可以使用 CSS 媒体查询来调整样式，确保圆圈在所有设备上都能正确显示。
- 用户体验： 提供清晰的输入提示和错误信息，帮助用户更好地使用该功能。
通过以上步骤，你就可以在网页文本框中创建和控制同心圆，并根据用户输入动态调整它们的大小。记住，理解 CSS 定位和 JavaScript 事件处理是实现这一目标的关键。
