在文本框内设置同心圆-html教程-PHP中文网

在文本框内设置同心圆

聖光之護

发布： 2025-09-27 17:30:01

原创

880人浏览过

在文本框内设置同心圆

本文档旨在指导开发者如何在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的回调函数中更新圆圈的大小。

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

查看详情

方法一：手动触发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的回调函数中更新圆圈的大小来解决。

以上就是在文本框内设置同心圆的详细内容，更多请关注php中文网其它相关文章！