微带线计算器CSS样式优化及结果展示框开发求助

实现方案 #

直接在原有代码基础上修正语法错误+新增极简CSS样式即可实现清晰的结果展示框效果，所有计算逻辑完全保留，你可以直接复制以下完整代码运行使用：

<!DOCTYPE html>
<html>
<head>
  <title>微带线计算器</title>
  <style>
    /* 全局基础样式 */
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 30px auto;
      padding: 0 20px;
    }
    /* 输入项间距 */
    .form-item {
      margin: 15px 0;
    }
    /* 输入框通用样式 */
    input.text {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 250px;
      margin-left: 10px;
    }
    /* 计算按钮样式 */
    #calc-btn {
      padding: 8px 20px;
      background: #409eff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #calc-btn:hover {
      background: #69b1ff;
    }
    /* 结果展示框核心样式 */
    #Calculate {
      padding: 12px 15px;
      border: 2px solid #67c23a;
      border-radius: 4px;
      background: #f0f9ff;
      font-size: 18px;
      font-weight: bold;
      width: 300px;
      margin-right: 15px;
    }
  </style>
</head>
<body>
  <h1>Microstrip Calculator</h1>
  <p>Enter the following values in numeric form:</p>
  <form>
    <div class="form-item">
      Di-Electric Constant: <input class="text" placeholder="Enter Value" id="constant" />
    </div>
    <div class="form-item">
      Di-Electric Height: <input class="text" placeholder="Enter Value" id="height" />
    </div>
    <div class="form-item">
      Operational Frequency: <input class="text" placeholder="Enter Value" id="freq" />
    </div>
    <br>
    <div class="form-item">
      <input type="text" id="Calculate" readonly />
      <input type="button" value="Calculate" id="calc-btn" onclick="result()" />
    </div>
  </form>

  <script>
    function result() {
      var x = document.getElementById("constant").value;
      var y = document.getElementById("height").value;
      var z = document.getElementById("freq").value;
      var c = 3 * 10 ** 8;
      var k = Number(x) + 1;
      var k2 = k / 2;
      var k3 = Math.sqrt(k2);
      var y1 = Number(z) * 2;
      var W = c / (y1 * k3);
      document.getElementById("Calculate").value = W;
    }
  </script>
</body>
</html>

样式可调说明 #

你可以根据自己的需求修改CSS里的对应属性，无需改动其他逻辑：

• 修改#Calculate下的border属性可以调整结果框的边框颜色、粗细
• 修改background属性可以调整结果框的背景色
• 修改padding属性可以调整结果框内的留白大小
• 修改font-size属性可以调整结果文字的显示大小
• 代码中给#Calculate加readonly属性是避免用户误改计算结果，不需要可以直接删除

内容的提问来源于stack exchange，提问作者Najeeb Qureshi