就是这个样的粗爆,手搓一个计算器:加倍时间计算器
线上运行,可以直接打开:加倍时间计算器(在线计算器)
作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。
HTML:
<div class="calculator"><div class="input-group"><label>增长率 (%):</label> <input id="growthRate" step="any" type="number" placeholder="请输入增长率"></div><button onclick="calculateDoublingTime()">计算加倍时间</button><div class="result"><p>计算结果:</p><p>加倍时间: <span id="doublingTimeOutput">0.00 年</span></p></div></div>
JS:
function calculateDoublingTime() {const growthRate = parseFloat(document.getElementById('growthRate').value);if (isNaN(growthRate) || growthRate <= 0) {alert('请输入有效的正增长率');return;}const doublingTime = 72 / growthRate;document.getElementById('doublingTimeOutput').textContent = doublingTime.toFixed(2) + ' 年';
}
CSS:
.calculator {width: 300px;background-color: #333;color: white;padding: 20px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}label {display: block;margin-bottom: 10px;font-size: 16px;
}input, select {width: 100%!important;padding: 10px!important;margin-bottom: 20px;color: #000000; border-radius: 5px;border: 1px solid #555;font-size: 16px!important;background-color: #ffffff!important;
}button {width: 100%;padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;display: block;margin: 0px;margin-bottom: 20px;margin-left: 0px!important;
}button:hover {background-color: orange;
}.result {margin-top: 20px;text-align: center;
}option {background-color: #ffffff;
}p {font-size: 18px;margin-top: 5px!important;
}