「原理」
体内每1克脂肪提供9.46千卡的热量，每消耗9460千卡热量=消耗1000克（1公斤）脂肪。也就是说只要计算出每天的热量消耗就可以计算出具体的天数了！
『计算 - 第一步：基础代谢值(BMR)计算』
首先需要计算出每天在没有任何肌肉活动的情况下所消耗的热量，也就是基础代谢值（BMR）。
BMR (男性) = (13.7 x 体重(干克)) + (5.0 x 身高(厘米)) - (6.8 x 年龄) + 66
BMR (女性) = (9.6 x 体重(干克)) + (1.8 x 身高(厘米)) - (4.7 x 年龄) + 655
『计算 - 第二步：评估每日摄入热量』
评估每日摄入的热量，如果你不知道你食物的热量，可以参考一些热量表比如：薄荷网，上面就有很多食物的热量对照表。
『计算 - 第三步：计算运动消耗的热量』
田径：每半小时可消耗热量四百五十卡
篮球：每半小时消耗热量二百五十卡
自行车：每半小时消耗热量三百三十卡
骑马：每半小时消耗热量一百七十五卡
滑水：每半小时消耗热量二百四十卡
高尔夫球：每半小时消耗热量一百二十五卡
慢跑：每半小时消耗热量三百卡
散步：每半小时消耗热量七十五卡
滑旱冰：每半小时消耗热量一百七十五卡
跳绳：每半小时消耗热量四百卡
壁球：每半小时消耗热量三百卡
网球：每半小时消耗热量二百二十卡
乒乓球：每半小时消耗热量一百八十卡
排球：每半小时消耗热量一百七十五卡
爬楼梯：1500级（不计时）250卡
快走：（一小时8公里） 555卡
快跑：(一小时12公里）700卡
单车：(一小时9公里)245卡
单车：(一小时16公里)415卡
单车：(一小时21公里)655卡
舞池跳舞：300卡
健身操：300卡
骑马：350卡
网球：425卡
爬梯机：680卡
手球：600卡
桌球：300卡
慢走(一小时4公里)：255卡
慢跑(一小时9公里)：655卡
游泳(一小时3公里)：550卡
有氧运动(轻度)：275卡
有氧运动(中度)：350卡
高尔夫球(走路自背球杆)：270卡
锯木：400卡
体能训练：300卡
走步机(一小时6公里)：345卡
轮式溜冰：350卡
跳绳：660卡
郊外滑雪(一小时8公里)：600卡
练武术：790卡
『计算 - 第四步：计算热量缺口』
每日摄入热量-（基础代谢值(BMR) + 肌肉运动代谢值）= 热量缺口
『计算 - 第五步：计算目标达成周期 』
192500千卡(减掉1公斤脂肪所需要消耗的热量) ÷ 热量缺口= 减肥所需天数
「代码部分」
『HTML 』
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name='description' content='在线减肥周期计算，计算减肥所需天数，基础代谢速率 Online weight loss cycle calculation, calculate the number of days needed to lose weight'>
<title>在线减肥周期计算，计算减肥所需天数，基础代谢速率</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<script>
var w_h_t;
</script>
<script type="text/javascript" src="./main.js"></script>
<script>
new_page = "代谢测试";
</script>
<script type="text/javascript">
if (localStorage.getItem("age") != null) {
(function(c, l, a, r, i, t, y) {
c[a] = c[a] || function() {
(c[a].q = c[a].q || []).push(arguments)
};
t = l.createElement(r);
t.async = 1;
t.src = "https://www.clarity.ms/tag/" + i;
y = l.getElementsByTagName(r)[0];
y.parentNode.insertBefore(t, y);
})(window, document, "clarity", "script", "coc2lf13f8");
}
</script>
</head>
<body>
<h1 hidden>在线减肥周期计算，计算减肥所需天数，基础代谢速率</h1>
<!--提示框-->
<div id="inform" class="inform">
<a id="inform_in" class="inform_in"></a>
</div>
<div id="test_start" class="test-box">
<div id="t_d" hidden>
<h2 class="start_title">测试结果</h2>
<h3>每日
<a id="day_k"></a>
<a style="color: rgb(255, 247, 190);" id='result_dayk'></a>
</h3>
<h3>按照当前进度距离目标还有:
<a style="color: rgb(255, 247, 190);" id='result_day'></a>天
</h3>
<h3>建议:
<a style="color: rgb(255, 247, 190); font-size: x-large;" id='result_com'></a>
</h3>
</div>
<div id="t_s">
<h2>
减肥周期计算
</h2>
<div class="user-box">
<form>
<select class="sleMF" id="BMR_sex">
<option value="NO">性别</option>
<option value="M">男</option>
<option value="F">女</option>
</select>
</div>
<br>
<div class="user-box">
<input id="BMR_age" type="number" name="" required="">
<label>年龄</label>
</div>
<div class="user-box">
<input id="BMR_wi" type="number" name="" required="">
<label>体重(KG)</label>
</div>
<div class="user-box">
<input id="BMR_hi" type="number" name="" required="">
<label>身高(CM)</label>
</div>
<div class="user-box">
<select class="sleMF" id="BMR_sl">
<option value="NO">运动类型</option>
<option value="cycling">自行车</option>
<option value="walk">走路</option>
<option value="golf">高尔夫球</option>
<option value="bowling">保龄球</option>
<option value="go">快走</option>
<option value="Boating">划船</option>
<option value="dancing">有氧舞蹈</option>
<option value="Badminton">羽毛球</option>
<option value="Volleyball">排球</option>
<option value="Table_tennis">乒乓球</option>
<option value="hockey">冰球</option>
<option value="skating">溜直排輪</option>
<option value="Jump">跳绳</option>
<option value="Jogging">慢跑</option>
<option value="Boxing">拳墼</option>
<option value="Frog_swimming">蛙式游泳</option>
<option value="swimming">自由式游泳</option>
<option value="No_movement">无运动</option>
</select>
</div>
<div class="user-box">
<input id="BMR_tim" type="number" name="" required="">
<label>每日运动时长(分钟)</label>
</div>
<div class="user-box">
<input id="BMR_tark" type="number" name="" required="">
<label>你的理想体重(KG)</label>
</div>
<div class="user-box">
<input id="BMR_hu" type="number" name="" required="">
<label>每日摄入热量(千卡)</label>
</div>
</form>
<a onclick="window.open('https://www.boohee.com/food')" style="color: rgb(255, 255, 255); background-color: #21364b;font-size: x-large;margin: 3px 3px 3px 3px; border-radius: 3px;">
食品热量表(千卡)
</a><br><br>
<a onclick="get_BMR();" style="color: rgb(255, 255, 255); background-color: #21364b;font-size: x-large;margin: 3px 3px 3px 3px; border-radius: 3px;">
开始测试
</a>
</div>
</div>
</body>
</html>『CSS』
<!--style.css-->
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #243b55;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}
.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.login-box .user-box {
position: relative;
}
.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.login-box .user-box input:focus~label,
.login-box .user-box input:valid~label {
top: -20px;
left: 0;
color: #03e9f4;
font-size: 12px;
}
.login-box form a {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f4;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 40px;
letter-spacing: 4px
}
.login-box a:hover {
background: #03e9f4;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
}
.login-box a span {
position: absolute;
display: block;
}
.login-box a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
.login-box a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s
}
@keyframes btn-anim2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
.login-box a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s
}
@keyframes btn-anim3 {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
.login-box a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s
}
@keyframes btn-anim4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
.inform {
position: fixed;
text-align: center;
width: auto;
background-color: rgba(0, 0, 0, 0.606);
z-index: 10;
top: 18%;
left: 50%;
transform: translateX(-50%);
/* transform: rotate(60deg);*/
}
.inform_in {
margin-left: 30px;
margin-right: 30px;
margin-top: 3px;
margin-bottom: 3px;
font-size: xx-large;
color: rgb(255, 255, 255);
}
.overall {
position: absolute;
left: 50%;
width: 95%;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}
.top {
width: 100%;
height: calc(34vh);
}
rect {
background-color: rgba(0, 0, 0, .5);
fill: rgba(0, 0, 0, 0);
}
.test {
position: absolute;
left: 25%;
top: 87%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
box-sizing: border-box;
border-radius: 10px;
}
.target {
position: absolute;
left: 75%;
top: 87%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}
@media screen and (max-height:860px) {
.top {
width: 100%;
height: calc(35vh);
}
.test {
position: absolute;
left: 25%;
top: 100%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
box-sizing: border-box;
border-radius: 10px;
}
.target {
position: absolute;
left: 75%;
top: 100%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}
}
@media screen and (max-height:750px) {
.top {
width: 100%;
height: calc(35vh);
}
.test {
position: absolute;
left: 25%;
top: 105%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
box-sizing: border-box;
border-radius: 10px;
}
.target {
position: absolute;
left: 75%;
top: 105%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}
}
@media screen and (max-height:705px) {
.top {
width: 100%;
height: calc(35vh);
}
.test {
position: absolute;
left: 25%;
top: 109%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
box-sizing: border-box;
border-radius: 10px;
}
.target {
position: absolute;
left: 75%;
top: 109%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}
}
@media only screen and (max-device-width: 1024px) {
.top {
width: 100%;
height: calc(20vh);
}
.test {
position: absolute;
left: 25%;
top: 84%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
box-sizing: border-box;
border-radius: 10px;
}
.target {
position: absolute;
left: 75%;
top: 84%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}
}
@media screen and (max-height:673px) {
.top {
width: 100%;
height: calc(46vh);
}
.test {
position: absolute;
left: 25%;
top: 160%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
box-sizing: border-box;
border-radius: 10px;
}
.target {
position: absolute;
left: 75%;
top: 160%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}
}
.start_title {
text-align: center;
color: rgb(255, 255, 255);
}
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #243b55;
}
.test-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}
.test-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.test-box .user-box {
position: relative;
}
.test-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.test-box .user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.test-box .user-box input:focus~label,
.test-box .user-box input:valid~label {
top: -20px;
left: 0;
color: #03e9f4;
font-size: 12px;
}
.test-box form a {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f4;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 40px;
letter-spacing: 4px
}
.test-box a:hover {
background: #03e9f4;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
}
.test-box a span {
position: absolute;
display: block;
}
.test-box a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
.test-box a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s
}
@keyframes btn-anim2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
.test-box a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s
}
@keyframes btn-anim3 {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
.test-box a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s
}
@keyframes btn-anim4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
h3 {
font-size: xx-large;
color: #ffffff;
font-weight: bolder;
text-align: center;
}
#landscape {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: black;
}
.landscape_t {
font-size: 900%;
font-weight: bolder;
color: rgb(255, 250, 250);
margin-top: 50%;
text-align: center;
}
.landscape_tt {
font-size: 600%;
font-weight: bolder;
color: rgb(255, 250, 250);
margin-top: 1%;
text-align: center;
}
.img {
text-align: center;
height: 300px;
margin: 0 auto;
}
.imgg {
text-align: center;
height: 150px;
margin: 0 auto;
}
.img_d {
text-align: center;
}
#BMR {
top: 6px;
left: 6px;
position: fixed;
background-color: #090e15c5;
border-radius: 10px;
text-align: center;
color: #fff;
height: 50px;
width: 200px;
z-index: 10;
}
#BMR_in {
margin: 0 auto;
padding-top: 2px;
font-size: xx-large;
}
.sleMF {
background-color: #19293a;
height: 40px;
width: 100px;
font-size: large;
color: rgb(255, 255, 255);
border-radius: 10px;
}
@media screen and (max-height:673px) {
.top {
width: 100%;
height: calc(46vh);
}
.test {
position: absolute;
left: 25%;
top: 160%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
box-sizing: border-box;
border-radius: 10px;
}
.target {
position: absolute;
left: 75%;
top: 160%;
width: 44%;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}
}『JS』
//main.js
var BMR_re;
function get_BMR() {
document.getElementById("t_s").hidden = true;
document.getElementById("t_d").hidden = false;
//性别
myselect = document.getElementById("BMR_sex");
var index = myselect.selectedIndex;
var gender = myselect[index].value;
//年龄
var age_BMR = Number(document.getElementById("BMR_age").value);
//体重（千克）
var weight = Number(document.getElementById("BMR_wi").value);
//身高厘米
var stature = Number(document.getElementById("BMR_hi").value);
if (gender == "M") {
var BMR_re = (weight * 13.7) + (5 * stature) - (6.8 * age_BMR) + 66;
}
if (gender == "F") {
var BMR_re = (weight * 9.6) + (1.8 * stature) - (4.7 * age_BMR) + 655;
}
//无运动
//BMR_re
//肌肉消耗(千卡)
var BMR_mus;
//摄入热量(千卡)
var BMR_hu = document.getElementById("BMR_hu").value;
//运动时间
var BMR_time = document.getElementById("BMR_tim").value;
myselectit = document.getElementById("BMR_sl");
var indexit = myselectit.selectedIndex;
var genderit = myselectit[indexit].value;
//18
if (genderit == 'cycling') { BMR_mus = 90; }
if (genderit == 'walk') { BMR_mus = 93; }
if (genderit == 'golf') { BMR_mus = 111; }
if (genderit == 'bowling') { BMR_mus = 120; }
if (genderit == 'go') { BMR_mus = 132; }
if (genderit == 'Boating') { BMR_mus = 132; }
if (genderit == 'dancing') { BMR_mus = 150; }
if (genderit == 'Badminton') { BMR_mus = 153; }
if (genderit == 'Volleyball') { BMR_mus = 153; }
if (genderit == 'Table_tennis') { BMR_mus = 159; }
if (genderit == 'hockey') { BMR_mus = 186; }
if (genderit == 'skating') { BMR_mus = 240; }
if (genderit == 'Jump') { BMR_mus = 270; }
if (genderit == 'Jogging') { BMR_mus = 282; }
if (genderit == 'Boxing') { BMR_mus = 342; }
if (genderit == 'Frog_swimming') { BMR_mus = 354; }
if (genderit == 'swimming') { BMR_mus = 525; }
if (genderit == 'No_movement') { BMR_mus = 0; }
BMR_mus = (BMR_mus / 30) * BMR_time;
var BMR_tark = weight - document.getElementById("BMR_tark").value;
var window_BMR = BMR_hu - (BMR_mus + BMR_re);
var window_BMR$;
if (window_BMR < 0) {
window_BMR$ = "净消耗";
window_BMR = window_BMR * -1;
} else {
window_BMR$ = "增加";
}
//窗口
document.getElementById("result_dayk").innerHTML = window_BMR$ + window_BMR + '千卡';
var BMR_tarkk = BMR_tark * 7700;
//减肥目标需要的周期天数 = 总共千卡 ÷ 千卡/天
var BMR_day = BMR_tarkk / window_BMR;
//日期
var BMR_day$;
if (BMR_day < 0) {
BMR_day$ = "∞";
BMR_day = '';
document.getElementById("result_com").innerHTML = "你的每日摄入热量大于你消耗的，所以导致无法减重反而增重。你可以增加运动量或减少热量的摄入。";
} else {
BMR_day$ = "";
document.getElementById("result_com").innerHTML = "你的热量消耗大于你摄入的，你正在减重，如果那想增加速度你可以增加运动量或减少热量的摄入。";
BMR_day = Number(BMR_day).toFixed();
}
document.getElementById("result_day").innerHTML = BMR_day + BMR_day$;
}版权声明：本文为Tony_Kan_原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。