就是这个样的粗爆,手搓一个计算器:热量计算器

       作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。

HTML:

<div class="calculator">
<label for="weight">体重 (kg):</label> 
<input id="weight" step="0.1" type="number" placeholder="请输入您的体重"> 
<label for="height">身高 (cm):</label> 
<input id="height" step="0.1" type="number" placeholder="请输入您的身高"> 
<label for="age">年龄:</label> 
<input id="age" type="number" placeholder="请输入您的年龄"> 
<label for="gender">性别:</label>
<select id="gender">
<option value="male">男性</option>
<option value="female">女性</option>
</select>
<label for="activity">活动水平:</label>
<select id="activity">
<option value="1.2">很少运动</option>
<option value="1.375">轻量运动</option>
<option value="1.55">中度运动</option>
<option value="1.725">高度运动</option>
<option value="1.9">非常高强度运动</option>
</select>
<button onclick="calculateCalories()">计算</button>
<div class="result">
<p>每日所需热量:</p>
<p id="calories">0</p>
<p>千卡</p>
</div>
</div>

JS:

function calculateCalories() {const weight = parseFloat(document.getElementById('weight').value);const height = parseFloat(document.getElementById('height').value);const age = parseInt(document.getElementById('age').value);const gender = document.getElementById('gender').value;const activity = parseFloat(document.getElementById('activity').value);if (isNaN(weight) || isNaN(height) || isNaN(age) || weight <= 0 || height <= 0 || age <= 0) {alert('请输入有效的数值');return;}let bmr = 0; // 基础代谢率if (gender === 'male') {bmr = 88.36 + (13.4 * weight) + (4.8 * height) - (5.7 * age);} else {bmr = 447.6 + (9.2 * weight) + (3.1 * height) - (4.3 * age);}const calories = bmr * activity; // 每日所需热量document.getElementById('calories').textContent = calories.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;
}button:hover {background-color: orange;
}.result {margin-top: 20px;text-align: center;
}option {background-color: #ffffff;
}p {font-size: 18px;margin-top: 5px!important;
}

线上运行,可以直接打开:热量计算器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/451848.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git之代已修改文件的目录高亮设置

不管Android Studio或者Idea&#xff0c;进入Setting 选择如图所示&#xff0c;并进行勾选 就可以高亮了。

【C++】类的默认成员函数:深入剖析与应用(上)

&#x1f600;在上一篇文章中我们初步了解了C的基础概念&#xff0c;现在我们进行对C类的默认成员函数进行更加深入的理解&#xff01; &#x1f449;【C新手入门指南&#xff1a;从基础概念到实践之路】 目录 &#x1f4af;前言 &#x1f4af;构造函数 一、构造函数的定义…

Ambari-2.7.4和HDP-3.1.4安装(附Ambari和HDP安装包)

1.、环境及软件准备 Ambari-2.7.4和HDP-3.1.4下载 ,提取码:3rwq 环境:CentOS7(我这里使用的是CentOS7.9版本)、三台虚拟机,单节点内存13GB、存储80GB 软件:mysql5.7+、jdk8、ambari-2.7.4.0-centos7.tar.gz、HDP-3.1.4.0-centos7-rpm.tar.gz、HDP-UTILS-1.1.0.22-centos7…

Nodejs使用http模块创建Web服务器接收解析RFID读卡器刷卡数据

本示例使用设备&#xff1a; https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.1d292c1buHvw58&ftt&id22173428704 Javascript源码 //引用http模块创建web服务器&#xff0c;监听指定的端口获取以GET、POST、JSON等方式上传的数据&#xff0c;并回应驱动读卡…

阿里云数据库导出 | 数据管理(兼容数据库备份)

文章目录 1、数据库导出2、操作步骤3、DMS - Data Management Service 1、数据库导出 2、操作步骤 3、DMS - Data Management Service

C#的自定义对话框和提示窗体 - 开源研究系列文章

上次的应用因为需要用到对话框和提示窗体&#xff0c;然后系统自带的MessageBox界面个人又看不上&#xff0c;所以就想自己编写一个自定义的窗体&#xff0c;于是有了本文&#xff0c;具体的已经应用到笔者其它的应用里了。 1、 项目目录&#xff1b; 2、 源码介绍&#xff1b;…

Bootstrapping、Bagging 和 Boosting

bagging方法如下&#xff1a; bagging和boosting比较

k8s-对命名空间资源配额

对k8s命名空间限制的方法有很多种&#xff0c;今天来演示一下很常用的一种 用的k8s对象就是ResourceQuota 一&#xff1a;创建命名空间 kubectl create ns test #namespace命名空间可以简写成ns 二&#xff1a; 对命名空间进行限制 创建resourcequota vim resourcequ…

秋招面试题记录_半结构化面试

c八股(可能问的多一点) 1.简单说说C11语法特性 答&#xff1a; 1.auto以及decltype自动类型推导&#xff0c;避免手动声明复杂类型&#xff0c;减少冗长代码提升了可读性和安全性。 2.智能指针 自动释放内存 (具体说说) 有shared和unique 差异主要体现在所有权、内存开销、…

Java项目-基于Springboot的高校党务系统项目(源码+说明).zip

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…

基于SpringBoot的“社区医院管理服务系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“社区医院管理服务系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统首页界面图 用户注册界面图 医生界面…

OpenWRT 和 Padavan 路由器配置网络打印机 实现远程打印

本文首发于只抄博客&#xff0c;欢迎点击原文链接了解更多内容。 前言 之前有给大家介绍过 Armbian 安装 CUPS 作为打印服务器&#xff0c;像是 N1 盒子、玩客云&#xff0c;甚至是随身 WiFi 都可以通过 CUPS 来进行打印。但是有些朋友不想专门为打印机添置一个设备&#xff0…

jeecg3版本的vue,离线启动

jeecg的vue2版本已经停止维护&#xff0c;所以只能用vue3的版本。3版本中使用的是pnpm&#xff08;npm的增强版本&#xff09;下载依赖。使用pnpm安装的node_modules&#xff0c;不能直接复制到离线主机中&#xff08;因为在 pnpm安装过程中&#xff0c;会给依赖的配置文件写死…

数据库、数据仓库、数据湖和数据中台有什么区别

很多企业在面对数据存储和管理时不知道如何选择合适的方式&#xff0c;数据库、数据仓库、数据湖和数据中台&#xff0c;这些方式都是什么&#xff1f;有什么样的区别&#xff1f;企业根据其业务类型该选择哪一种&#xff1f;本文就针对这些问题&#xff0c;来探讨下这些方式都…

React路由 基本使用 嵌套路由 动态路由 获取路由参数 异步路由 根据配置文件来生成路由

文章目录 React-router的三个版本react-router使用嵌套路由动态路由 获取路由参数Params参数Query参数Location信息 控制跳转地址异步路由根据配置文件生成路由 React-router的三个版本 React-router 服务端渲染使用React-router-dom 浏览器端渲染使用React-router-native Rea…

Electron入门笔记

Electron入门笔记 ElectronElectron 是什么Electron流程模型创建第一个Electron项目配置自动重启主进程和渲染进程通信打包应用 Electron Electron 是什么 跨平台的桌面应用开发框架使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium和 Node.js Electro…

基于System.js的微前端实现(插件化)

目录​​​​​​​ 写在前面 一、微前端相关知识 &#xff08;一&#xff09;概念 &#xff08;二&#xff09; 优势 &#xff08;三&#xff09; 缺点 &#xff08;四&#xff09;应用场景 &#xff08;五&#xff09;现有框架 1. qiankun 2. single-spa 3. SystemJ…

机器学习课程学习周报十七

机器学习课程学习周报十七 文章目录 机器学习课程学习周报十七摘要Abstract一、机器学习部分1. 变分推断/推理1.1 证据下界1.2 q ( z ) {q(z)} q(z)的选取 2. VAE2.1 Auto-Encoder的简单回顾2.2 为什么提出VAE2.3 VAE的数学原理 3. Diffusion Model的数学原理3.1 Training算法…

【C语言】递归函数变量的作用域

变量的作用域 全局变量&#xff1a;在整个程序内可以识别&#xff0c;且唯一。 局部变量&#xff1a;仅在当前函数内有效&#xff0c;比如main函数、用户自定义函数。 递归函数 指的是一类函数&#xff0c;函数调用自身&#xff0c;包括递推和回归。使用递归的方式&#xff0c…

JavaWeb 19 AJAX

目录 一、什么是AJAX 同步交互和异步交互 同步交互 异步交互 Ajax工作原理 Ajax实现方式 原生JavaScript方式进行ajax(了解)&#xff1a; "我就是希望你好&#xff0c;就像很多人希望我好一样&#xff0c;特别简单&#xff0c;特别真挚。也不为了什么&#xff0c;就是希望…