爪機版
我们吟唱的山谷，我们飞翔的天空#1 2026-04-13 18:36:34 | 只看该作者
#2 2026-04-13 18:41:33 | 只看该作者
回应： AI工具樓
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>
若有謬誤，懇請告知。
离线
#3 2026-04-14 20:31:09 | 只看该作者
回应： AI工具樓
簡單小巧的肉類能量計算器
<!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>
若有謬誤，懇請告知。
离线