本文档旨在指导开发者如何在HTML文本框内创建和控制同心圆，并解决输入值改变后圆圈大小不更新的问题。通过修改CSS的定位方式，将圆圈定位在文本框内，并使用JavaScript动态调整圆圈大小。同时，本文档还提供了一种限制输入值大小，并向用户显示错误提示的方法，确保圆圈不会超出屏幕范围。
1. HTML 结构
首先，我们需要一个包含标题、输入框和用于绘制圆圈的容器的HTML结构。
<div class="wrapper">
<div class="title">
<h1>Cutter Calculator</h1>
</div>
<div class="Calculations">
<input type="number" id="outer_diameter" placeholder="Enter Outer Diameter"> <br>
<input type="number" id="inner_diameter" placeholder="Enter Thickness"> <br>
<input type="button" id="bttn" name="calculate" value="Calculate">
</div>
<div class="circles">
<span class="circle"></span>
<span class="circle2"></span>
</div>
</div>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的回调函数中更新圆圈的大小来解决。
