本文旨在解决如何在网页文本框内创建和控制同心圆的问题。通过修改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 根据输入框的值动态调整圆圈的大小。
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() { … }); 中，或者将 标签放在
以上就是在文本框中设置同心圆的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579352.html
微信扫一扫 
支付宝扫一扫 
