本文档旨在指导开发者如何在HTML文本框内创建和控制同心圆，并解决输入值改变后圆圈大小不更新的问题。通过修改CSS的定位方式，将圆圈定位在文本框内，并使用JavaScript动态调整圆圈大小。同时，本文档还提供了一种限制输入值大小，并向用户显示错误提示的方法，确保圆圈不会超出屏幕范围。
1. HTML 结构
首先，我们需要一个包含标题、输入框和用于绘制圆圈的容器的HTML结构。
Cutter Calculator
2. CSS 样式
关键在于.circles容器的定位方式和圆圈的定位方式。我们需要将.circles设置为position: relative，而将.circle和.circle2设置为position: absolute。 这样，圆圈就会相对于.circles容器进行定位，而不是整个页面。
.wrapper { height: 400px; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}.circles { margin-top: 15px; position: relative;}.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;}.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%;}
3. JavaScript 代码
使用jQuery监听输入框的change事件，当输入值改变时，动态调整圆圈的大小。同时，我们还需要动态调整.circles容器的大小，以适应圆圈的大小。
$(function() { $('.circle').hide(); $('#outer_diameter').on('change', function() { var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3); var $converted = ($outer_diameter * 10).toFixed(3); console.log($outer_diameter, $converted); $('.circle').css({ height: (2 * $converted), width: (2 * $converted), top: "calc(50% - " + ($converted) + "px)", left: "calc(50% - " + ($converted) + "px)" }); $('.circle').fadeIn(300); $('.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), top: "calc(50% - " + ($converted_2) + "px)", left: "calc(50% - " + ($converted_2) + "px)" }); $('.circle2').fadeIn(300); })});
代码解释:
$(‘.circle’).hide();: 页面加载时隐藏圆圈。$(‘#outer_diameter’).on(‘change’, function() { … });: 监听outer_diameter输入框的change事件。当输入框的值发生改变时，执行回调函数。parseFloat($(“#outer_diameter”).val()).toFixed(3);: 获取输入框的值，转换为浮点数，并保留三位小数。$(‘.circle’).css({ … });: 设置.circle元素的CSS属性，包括高度、宽度、top和left。$(‘.circle’).fadeIn(300);: 以300毫秒的淡入效果显示.circle元素。$(‘.circles’).css({height:(2 * $converted) + 10, width: (2 * $converted) + 10}): 设置包含圆圈的容器的高度和宽度，保证容器能够包含住圆圈。$(‘#inner_diameter’).on(‘change’, function() { … });: 监听inner_diameter输入框的change事件，逻辑与outer_diameter类似。
4. 限制输入值大小
为了防止用户输入过大的值导致圆圈超出屏幕范围，我们可以添加一个条件判断，限制输入值的范围。
$('#outer_diameter').on('change', function() { var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3); if ($outer_diameter >= 85) { alert("Outer Diameter Too big"); // 或者显示一个错误信息 // $('#error').text("Outer Diameter Too big").show(); return; } var $converted = ($outer_diameter * 10).toFixed(3); console.log($outer_diameter, $converted); $('.circle').css({ height: (2 * $converted), width: (2 * $converted), top: "calc(50% - " + ($converted) + "px)", left: "calc(50% - " + ($converted) + "px)" }); $('.circle').fadeIn(300); $('.circles').css({height:(2 * $converted) + 10, width: (2 * $converted) + 10}) $('#error').hide();})
代码解释:
if ($outer_diameter >= 85) { … }: 如果输入值大于等于85，则显示一个警告框，并阻止后续代码的执行。alert(“Outer Diameter Too big”);: 显示一个警告框，提示用户输入的值过大。return;: 阻止后续代码的执行。
5. 解决Formidable Forms计算后圆圈大小不更新的问题
如果使用了Formidable Forms，并且计算后的值没有立即更新圆圈的大小，可能是因为Formidable Forms的计算过程没有触发change事件。 我们需要手动触发change事件，或者直接在Formidable Forms的回调函数中更新圆圈的大小。
方法一：手动触发change事件
在Formidable Forms的计算完成后，手动触发outer_diameter和inner_diameter输入框的change事件。
// 假设Formidable Forms计算完成后会执行这个函数function formidableFormsCalculationComplete() { $('#outer_diameter').trigger('change'); $('#inner_diameter').trigger('change');}
方法二：在Formidable Forms的回调函数中更新圆圈大小
找到Formidable Forms的计算完成后的回调函数，直接在回调函数中更新圆圈的大小。 这需要你熟悉Formidable Forms的API和事件机制。
总结:
通过以上步骤，我们可以在文本框内创建和控制同心圆，并解决输入值改变后圆圈大小不更新的问题。关键在于CSS的定位方式和JavaScript的动态调整。同时，我们还提供了一种限制输入值大小，并向用户显示错误提示的方法，确保圆圈不会超出屏幕范围。 对于Formidable Forms计算后圆圈大小不更新的问题，可以通过手动触发change事件或者直接在Formidable Forms的回调函数中更新圆圈的大小来解决。
以上就是在文本框内设置同心圆的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579360.html
微信扫一扫 
支付宝扫一扫 
![linux系统下codeblocks控制台打印中文乱码[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175245629895736.jpg)
![linux系统下codeblocks控制台打印中文乱码[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175245629849970.jpg)
![linux系统下codeblocks控制台打印中文乱码[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175245629946891.jpg)
![linux系统下codeblocks控制台打印中文乱码[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175245629944402.jpg)
