如何移除Nitrox MOD计算器页面白色框及优化功能布局？

一、移除白色框 #

你看到的白色框是代码里的<hr size=25>生成的超大白色水平分隔线，直接删除这行代码即可。另外原HTML存在标签不匹配问题（比如提前闭合的</TR>、</form>），同步清理这些冗余标签，避免布局混乱。

二、计算公式调整 #

需求A1：输出四舍五入后的整数 #

计算完成后用Math.round()方法处理结果：

document.MOD.ans.value = Math.round(x);

需求A2：保留两位小数 #

用toFixed(2)格式化结果，同时添加输入验证防止无效值报错：

document.MOD.ans.value = x.toFixed(2);

额外建议增加输入校验，避免除以0或空值的错误：

if (!a || !b || isNaN(a) || isNaN(b) || c === 0) {
    document.MOD.ans.value = "无效输入";
    return;
}

三、布局优化 #

• 清理嵌套过深的表格，用CSS替代冗余表格结构
• 统一设置文本为浅色（适配深色背景），提升可读性
• 调整单元格对齐规则和间距，让输入区域更规整
• 给表单元素添加统一样式，增强视觉一致性

完整修改后的代码 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Technical Diving and Recreational - Nitrox Calculator</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="nitrox calculator." name=description>
<META content="nitrox calculator" name=keywords>
<META NAME="Generator" CONTENT="Dreamweaver MX">
<script language=javascript type="text/javascript"> 
function MOD_CALC() 
{
    let a = document.MOD.num1.value;
    let b = document.MOD.num2.value;
    
    // 输入校验
    if (!a || !b || isNaN(a) || isNaN(b)) {
        document.MOD.ans.value = "无效输入";
        return;
    }
    
    let c = (a * 1 < 1) ? a * 1 : a * 1 / 100;
    let d = b * 1;
    
    if (c === 0) {
        document.MOD.ans.value = "无效输入";
        return;
    }
    
    let x = ((d/c)-1)*33;
    
    // 二选一：四舍五入整数 或 保留两位小数
    document.MOD.ans.value = Math.round(x);
    // document.MOD.ans.value = x.toFixed(2);
}
</script>
<style>
  body {font-family:arial; font-size:12px; color:white; background-color:#454343; margin:0; padding:20px;}
  input {background-color:#8b0000; color:white; border:1px solid #fff; padding:4px;}
  .calc-container {width:500px; margin:0 auto; background-color:#993e3e; padding:20px;}
  .form-table {width:100%; border-collapse:separate; border-spacing:10px;}
  .label-col {text-align:right; width:30%;}
  .input-col {text-align:left;}
  .button-col, .result-col {text-align:center;}
  h1 {color:silver; margin-top:0;}
  h3 {margin-top:0;}
</style>
</HEAD>
<BODY>
<div class="calc-container">
    <h1>MOD CALCULATOR</h1>
    <h3>Maximum Operation Depth for Nitrox Mixes</h3>
    <form name="MOD">
        <table class="form-table">
            <tr>
                <td class="label-col">Nitrox Mix:</td>
                <td class="input-col"><input type="text" id="num1" size="4"> %</td>
                <td class="button-col" rowspan=2>
                    <input type="button" value="Calculate" onClick="MOD_CALC()">
                </td>
                <td class="result-col" rowspan=2>
                    MOD is<br><input type="text" id="ans" size="10" >&nbsp;fsw  
                </td>
            </tr>
            <tr>
                <td class="label-col">Partial Pressure:</td>
                <td class="input-col"><input type="text" id="num2" Size="4"> PPO2</td>
            </tr>
        </table>
    </form>
</div>
</BODY>
</HTML>

说明： #

• 已移除导致白色框的<hr size=25>标签
• 新增输入校验逻辑，避免计算错误
• 重构布局结构，用CSS实现更整洁的排版
• 两种输出方式已注释，可按需切换

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