我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

🍉前言

　　初夏，夏日已经来临；假设一个场景，让你选择是
① 宅在家里，开着16度的空调吃着冰凉凉的西瓜玩着快乐的开黑游戏；
② 外出沙滩，穿着泳装；海景、美景、靓景、身材景尽情赏入眼帘；
③ 去游泳馆，狠狠的游一把;
④ ...

　　无论选择哪种，这时候我们都应该要注意一点是，我们的体重是否合理，是否需要调整饮食，为了更健康的体验夏日，赶紧来计算一下你的身材（BMI计算）吧！

🍉效果展示与体验地址

🍉效果展示

🍉体验地址

　　在线体验（pc端）：体验传送门
　　码上掘金体验：（注：把框收起来，体验效果更佳！）

🍉设计思路

主要核心是BMI计算公式，有了计算公式，我们就好办了；根据输入的值去处理是否为数字，符合则计算，并最后给出对应的指数建议。

🍉主要公式

BMI计算公式：体重（kg）/身高（m）/身高（m）

🍉举个例子

笔者，180cm，体重90kg；
所以计算就是：90/1.8/1.8 ≈ 27.8（四舍五入），27.8对应偏重。

🍉BMI参考标准（参考：BMI指数_标准体重指数BMI计算器 (stl56.com)）

🍉设计过程（代码讲解）

因为代码比较简单，也有注释；这里就不过多介绍了。直接上js源码（如果有疑惑的、或者更好的意见欢迎评论区留下你的影子~ ）

// 关闭弹窗框
function closeModal() {
    var modal = document.getElementById("modal-dialog");
    modal.style.display = "";
}

// 提交表单
function anpaiSumbit() {
    // 获取输入的身高
    var heightValue = document.getElementById("nfz-height").value;
    // 获取输入的体重
    var weightValue = document.getElementById("nfz-weight").value;
    if (checkHeight(heightValue) && checkWeight(weightValue)) {
        var bmi = getBMI(parseFloat(heightValue), parseFloat(weightValue));
        var showText = "你的BMI为：" + bmi + "<br>你的体重";
        if (bmi < 18.5) {
            showText += "偏低，多吃点长身体";
        } else if (bmi < 24) {
            showText += "正常，要继续保持哦！";
        } else if (bmi < 28) {
            showText += "偏重，该减减体重啦！";
        } else {
            showText += "过重，答应我一定减！";
        }
        showText += "<br><span class='anpai-tips'>(注意：身高单位是cm，体重单位是kg.)</span>";
        showModalMsg("计算成功", showText);
    }
}

// 显示弹窗框
function showModalMsg(titleValue, contentValue) {
    var title = document.getElementById("modal-title");
    title.innerText = titleValue;
    var content = document.getElementById("modal-content");
    content.innerHTML = contentValue;
    var modal = document.getElementById("modal-dialog");
    modal.style.display = "block";
}

// 判断是否输入数字
function isNumber(data) {
    return !isNaN(parseFloat(data)) && isFinite(data);
}

// 清空
function anpaiReset() {
    var heightDom = document.getElementById("nfz-height");
    var weightDom = document.getElementById("nfz-weight");
    heightDom.value = "";
    weightDom.value = "";
}

// 传入身高，体重，返回BMI计算值
function getBMI(h, w) {
    h = h / 100;
    return (w / h / h).toFixed(1); // 保留一位小数（四舍五入）
}

// 检查是否输入正确格式的身高
function checkHeight(height) {
    if (isNumber(height)) {
        return true;
    }
    var title = "计算错误";
    var content = "请检查所输入的身高（单位：cm）";
    showModalMsg(title, content);
    return false;
}

// 检查是否输入正确格式的体重
function checkWeight(weight) {
    if (isNumber(weight)) {
        return true;
    }
    var title = "计算错误";
    var content = "请检查所输入的体重（单位：kg）";
    showModalMsg(title, content);
    return false;
}

🍉源码地址

可以直接下载源码即可，也可以持续关注笔者的 Gitee 或 GitHub. 之后会做个整理所有已完成的小游戏小项目...

🍉Gitee gitee.com/nanfangzhe

🍉GitHub github.com/nanfangzhe2…

🍉文章小尾巴

文章写作、模板、文章小尾巴可参考：《写作“小心思”》
　　感谢你看到最后，最后再说两点~
　　①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
　　②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
　　我是南方者，一个热爱计算机更热爱祖国的南方人。

　　（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）

【HTML】这个炎热的夏日，你的身材做好准备了吗？

🍉前言