高中生求助：实现含自定义公式的交互程序并完成HTML转换

Hey there! 作为高中生能自己动手做交互程序超棒的👍 我帮你把需求整合为完整的HTML交互程序，你只需要替换自定义公式部分就能直接使用：

下面是包含参数收集、公式计算和结果展示的完整代码，已经帮你补上了「今日发生次数（x）」的输入模块，和你已完成的「今年发生次数（y）」模块保持一致的交互体验：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义公式交互计算器</title>
    <style>
        .app-container {
            max-width: 550px;
            margin: 3rem auto;
            padding: 2.5rem;
            font-family: "Microsoft Yahei", Arial, sans-serif;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            border-radius: 8px;
        }
        .input-section {
            margin-bottom: 1.8rem;
        }
        label {
            display: block;
            margin-bottom: 0.6rem;
            font-weight: 500;
            color: #333;
        }
        input {
            width: 100%;
            padding: 0.9rem;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 1rem;
            box-sizing: border-box;
        }
        input:focus {
            outline: none;
            border-color: #2196F3;
            box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
        }
        .calc-btn {
            padding: 1rem 2rem;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .calc-btn:hover {
            background-color: #1976D2;
        }
        .result-box {
            margin-top: 2rem;
            padding: 1.2rem;
            background-color: #f8f9fa;
            border-radius: 6px;
            font-size: 1.3rem;
            color: #2d3748;
            min-height: 50px;
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <h1>自定义公式计算器</h1>
        <div class="input-section">
            <label for="year-occurrence">今年的发生次数（y）：</label>
            <input type="number" id="year-occurrence" placeholder="请输入次数" required min="0">
        </div>
        <div class="input-section">
            <label for="today-occurrence">今日的发生次数（x）：</label>
            <input type="number" id="today-occurrence" placeholder="请输入次数" required min="0">
        </div>
        <button class="calc-btn" onclick="computeResult()">计算结果</button>
        <div class="result-box" id="result-display"></div>
    </div>

    <script>
        function computeResult() {
            // 获取用户输入的两个参数
            const y = parseFloat(document.getElementById('year-occurrence').value);
            const x = parseFloat(document.getElementById('today-occurrence').value);

            // 👇 这里替换成你的自定义公式
            // 示例：计算今日次数占今年的百分比
            const calculationResult = (x / y) * 100;

            // 展示计算结果（可根据需求调整格式）
            document.getElementById('result-display').textContent = 
                `计算结果：${calculationResult.toFixed(2)}%`;
        }
    </script>
</body>
</html>

关键部分说明 #

• 参数收集：已经帮你完成了x参数的输入框，和y参数保持一致的样式与验证（必填、非负数），无需额外修改。
• 自定义公式替换：找到<script>里的const calculationResult = ...这一行，把示例公式换成你自己的逻辑即可。比如你的公式是y * 0.3 + x * 2，就改成const calculationResult = y * 0.3 + x * 2;。
• 结果展示：示例中用toFixed(2)保留两位小数，你可以根据需求删除这个方法，或者调整保留位数。

小扩展建议 #

如果你的公式需要复杂逻辑（比如条件判断、特殊数学运算），可以直接在computeResult()函数里补充：

// 示例：添加条件判断逻辑
const ratio = (x / y) * 100;
let resultText;
if (ratio > 15) {
    resultText = `今日占比${ratio.toFixed(2)}%，已超过今年的15%，请注意！`;
} else {
    resultText = `今日占比${ratio.toFixed(2)}%，处于正常范围。`;
}
document.getElementById('result-display').textContent = resultText;

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