BMR(Basal Metabolic Rate 基礎代謝率)計算器,通常乘一個常數後就能近似表示爲動物的每日消耗能量。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨物种 BMR 计算器</title>
<style>
:root {
--primary: #4a90e2;
--secondary: #f5f7fa;
--text: #333;
--accent: #50c878;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--secondary);
color: var(--text);
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
display: flex;
gap: 20px;
max-width: 900px;
width: 95%;
flex-wrap: wrap;
}
.card {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
flex: 1;
min-width: 300px;
}
.sidebar {
background: white;
padding: 1.5rem;
border-radius: 15px;
width: 250px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
h2 { color: var(--primary); margin-top: 0; }
.input-group { margin-bottom: 1.5rem; }
label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
input, select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
}
.preset-btns {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 1.5rem;
}
button {
padding: 10px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
background: #eee;
}
button.active {
background: var(--primary);
color: white;
}
.calc-btn {
background: var(--accent);
color: white;
width: 100%;
font-size: 1.1rem;
font-weight: bold;
}
.result {
margin-top: 20px;
padding: 15px;
background: #eef9f1;
border-left: 5px solid var(--accent);
display: none;
}
.info-table {
width: 100%;
font-size: 0.9rem;
border-collapse: collapse;
}
.info-table th, .info-table td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #eee;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h2>BMR 计算器</h2>
<p style="font-size: 0.8rem; color: #666;">公式: $BMR = k \times \text{体重}^{0.75}$</p>
<label>选择物种预设</label>
<div class="preset-btns" id="presets">
<button onclick="setPreset('human', 70)">人类</button>
<button onclick="setPreset('cat', 60)">猫科</button>
<button onclick="setPreset('dog', 70)">犬类</button>
<button onclick="setPreset('bird', 129)">鸟类 (雀形目)</button>
<button onclick="setPreset('custom', 0)">自定义系数</button>
</div>
<div class="input-group">
<label for="weight">体重 (kg)</label>
<input type="number" id="weight" placeholder="请输入体重" step="0.1">
</div>
<div class="input-group" id="custom-k-group" style="display: none;">
<label for="k-value">自定义代谢系数 (k)</label>
<input type="number" id="k-value" value="70">
</div>
<button class="calc-btn" onclick="calculateBMR()">立即计算</button>
<div id="result" class="result">
<strong>计算结果:</strong>
<p id="bmr-output"></p>
</div>
</div>
<div class="sidebar">
<h3>常见动物 BMR 参考</h3>
<p style="font-size: 0.8rem; color: #777; margin-bottom: 15px;">(基于典型成年个体估算)</p>
<table class="info-table">
<thead>
<tr><th>物种</th><th>体重</th><th>约计 BMR</th></tr>
</thead>
<tbody>
<tr><td>麻雀</td><td>25g</td><td>4 kcal/d</td></tr>
<tr><td>家猫</td><td>4kg</td><td>170 kcal/d</td></tr>
<tr><td>中型犬</td><td>15kg</td><td>530 kcal/d</td></tr>
<tr><td>成年男</td><td>70kg</td><td>1690 kcal/d</td></tr>
<tr><td>大象</td><td>3000kg</td><td>28500 kcal/d</td></tr>
</tbody>
</table>
</div>
</div>
<script>
let currentK = 70;
function setPreset(type, k) {
// 更新按钮状态
const btns = document.querySelectorAll('#presets button');
btns.forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');
// 处理自定义逻辑
const kGroup = document.getElementById('custom-k-group');
if (type === 'custom') {
kGroup.style.display = 'block';
} else {
kGroup.style.display = 'none';
currentK = k;
document.getElementById('k-value').value = k;
}
}
function calculateBMR() {
const weight = parseFloat(document.getElementById('weight').value);
const k = parseFloat(document.getElementById('k-value').value);
if (!weight || weight <= 0) {
alert("请输入有效的体重!");
return;
}
// 使用克莱伯定律公式: BMR = k * W^0.75
const bmr = k * Math.pow(weight, 0.75);
const resultDiv = document.getElementById('result');
const output = document.getElementById('bmr-output');
resultDiv.style.display = 'block';
output.innerHTML = `该个体的基础代谢率 (BMR) 约为:<br><b style="font-size: 1.4rem; color: #50c878;">${bmr.toFixed(2)}</b> kcal/日`;
}
// 默认选中人类
window.onload = () => {
document.querySelector('#presets button').click();
};
</script>
</body>
</html>
若有謬誤,懇請告知。
离线
簡單小巧的肉類能量計算器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>肉类能量计算器</title>
<style>
:root {
--primary-color: #e63946;
--bg-color: #f8f9fa;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
}
h2 {
text-align: center;
color: var(--primary-color);
margin-bottom: 1.5rem;
}
.input-group {
margin-bottom: 1.2rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
color: #333;
}
select, input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
font-size: 1rem;
}
/* 单位切换样式 */
.unit-select {
margin-top: 8px;
}
button {
width: 100%;
padding: 12px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
font-size: 1.1rem;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #c1121f;
}
#result {
margin-top: 1.5rem;
padding: 1rem;
background-color: #fff3f3;
border-left: 5px solid var(--primary-color);
display: none;
}
.calories-val {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
}
</style>
</head>
<body>
<div class="container">
<h2>肉类能量计算器</h2>
<div class="input-group">
<label for="meatType">选择肉类品种</label>
<select id="meatType">
<option value="143">猪肉 (瘦)</option>
<option value="395">猪肉 (肥瘦)</option>
<option value="106">牛肉 (瘦)</option>
<option value="125">羊肉 (瘦)</option>
<option value="167">鸡胸肉</option>
<option value="240">鸡腿肉 (带皮)</option>
<option value="240">鸭肉</option>
<option value="115">鱼肉 (草鱼平均)</option>
<option value="91">虾肉</option>
</select>
</div>
<div class="input-group">
<label for="weight">输入质量</label>
<input type="number" id="weight" placeholder="例如: 100" min="0">
<!-- 新增单位切换下拉框 -->
<select id="unit" class="unit-select" onchange="updateUnitLabel()">
<option value="g">克 (g)</option>
<option value="kg">千克 (kg)</option>
</select>
</div>
<button onclick="calculate()">计算能量</button>
<div id="result">
<span id="output-text">预计摄入热量:</span><br>
<span class="calories-val" id="caloriesDisplay">0</span> 千卡 (kcal)
</div>
</div>
<script>
// 初始化时更新单位提示文字
window.onload = updateUnitLabel;
// 更新输入框的单位提示
function updateUnitLabel() {
const unit = document.getElementById('unit').value;
const weightInput = document.getElementById('weight');
if(unit === 'g'){
weightInput.placeholder = "例如: 100";
}else{
weightInput.placeholder = "例如: 0.5";
}
}
function calculate() {
const kcalPer100g = parseFloat(document.getElementById('meatType').value);
const weight = parseFloat(document.getElementById('weight').value);
const unit = document.getElementById('unit').value;
const resultDiv = document.getElementById('result');
const display = document.getElementById('caloriesDisplay');
// 验证输入
if (isNaN(weight) || weight <= 0) {
alert("请输入有效的质量!");
return;
}
let totalCalories;
// 根据单位自动换算
if(unit === 'g'){
// 克计算:(每100g热量 / 100) * 克数
totalCalories = (kcalPer100g / 100 * weight).toFixed(1);
}else{
// 千克计算:每100g热量 * 10 * 千克数
totalCalories = (kcalPer100g * 10 * weight).toFixed(1);
}
display.innerText = totalCalories;
resultDiv.style.display = 'block';
}
</script>
</body>
</html>
若有謬誤,懇請告知。
离线
多餘換行清除工具,用於清除文本間多於一個的換行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多余换行去除工具</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
body {
background-color: #f5f7fa;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
padding: 30px;
}
h1 {
text-align: center;
color: #333333;
margin-bottom: 30px;
font-size: 24px;
}
.text-area-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
color: #555555;
font-weight: 500;
font-size: 16px;
}
textarea {
width: 100%;
height: 200px;
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
resize: vertical;
font-size: 14px;
line-height: 1.6;
color: #333;
outline: none;
transition: border-color 0.3s ease;
}
textarea:focus {
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
.btn-group {
display: flex;
gap: 12px;
margin-bottom: 25px;
flex-wrap: wrap;
}
button {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary {
background-color: #409eff;
color: #ffffff;
}
.btn-primary:hover {
background-color: #337ecc;
}
.btn-secondary {
background-color: #f0f2f5;
color: #555555;
}
.btn-secondary:hover {
background-color: #e4e6eb;
}
.tip {
text-align: center;
color: #999999;
font-size: 12px;
margin-top: 10px;
}
.copy-success {
position: fixed;
top: 20px;
right: 20px;
background-color: #67c23a;
color: #ffffff;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.copy-success.show {
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<h1>多余换行去除工具</h1>
<!-- 输入文本区域 -->
<div class="text-area-group">
<label for="input-text">待处理文本(可粘贴含多余换行的内容)</label>
<textarea id="input-text" placeholder="请输入或粘贴需要去除多余换行的文本..."></textarea>
</div>
<!-- 操作按钮组 -->
<div class="btn-group">
<button class="btn-primary" id="process-btn">去除多余换行</button>
<button class="btn-secondary" id="clear-input-btn">清空输入</button>
<button class="btn-secondary" id="clear-output-btn">清空输出</button>
<button class="btn-secondary" id="copy-output-btn">复制输出结果</button>
</div>
<!-- 输出文本区域 -->
<div class="text-area-group">
<label for="output-text">处理后文本(已去除多余非正常换行)</label>
<textarea id="output-text" placeholder="处理后的结果将显示在这里..." readonly></textarea>
</div>
<div class="tip">提示:工具会保留单个有效换行,去除连续多个换行(空行)</div>
</div>
<!-- 复制成功提示 -->
<div class="copy-success" id="copy-tip">复制成功!</div>
<script>
// 获取页面元素
const inputText = document.getElementById('input-text');
const outputText = document.getElementById('output-text');
const processBtn = document.getElementById('process-btn');
const clearInputBtn = document.getElementById('clear-input-btn');
const clearOutputBtn = document.getElementById('clear-output-btn');
const copyOutputBtn = document.getElementById('copy-output-btn');
const copyTip = document.getElementById('copy-tip');
/**
* 核心功能:去除多余换行
* 逻辑:
* 1. 匹配连续多个换行(\n\n+ 匹配连续2个及以上换行,兼容Windows(\r\n)和Linux(\n)格式)
* 2. 替换为单个换行,保留有效换行结构
* 3. 去除文本首尾的多余换行和空格
*/
function removeExtraLineBreaks(text) {
if (!text) return '';
// 第一步:将Windows格式换行(\r\n)统一转为Linux格式(\n),避免格式混乱
const unifiedText = text.replace(/\r\n/g, '\n');
// 第二步:将连续多个换行(2个及以上)替换为单个换行
const processedText = unifiedText.replace(/\n{2,}/g, '\n');
// 第三步:去除文本首尾的换行和空白字符,返回最终结果
return processedText.trim();
}
// 绑定「去除多余换行」按钮事件
processBtn.addEventListener('click', function() {
const originalText = inputText.value;
const resultText = removeExtraLineBreaks(originalText);
outputText.value = resultText;
});
// 绑定「清空输入」按钮事件
clearInputBtn.addEventListener('click', function() {
inputText.value = '';
// 清空输入时可选择是否清空输出(按需调整,这里保留输出)
// outputText.value = '';
});
// 绑定「清空输出」按钮事件
clearOutputBtn.addEventListener('click', function() {
outputText.value = '';
});
// 绑定「复制输出结果」按钮事件
copyOutputBtn.addEventListener('click', async function() {
const outputValue = outputText.value;
if (!outputValue) {
alert('输出区域无内容可复制!');
return;
}
try {
// 调用浏览器剪贴板API复制文本
await navigator.clipboard.writeText(outputValue);
// 显示复制成功提示
copyTip.classList.add('show');
// 3秒后隐藏提示
setTimeout(() => {
copyTip.classList.remove('show');
}, 3000);
} catch (err) {
console.error('复制失败:', err);
alert('复制失败,请手动选中复制!');
}
});
// 可选:绑定回车快捷键(仅输入区聚焦时,按Ctrl+Enter触发处理)
inputText.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 'Enter') {
e.preventDefault();
processBtn.click();
}
});
</script>
</body>
</html>
若有謬誤,懇請告知。
离线