制作运动卡路里消耗计算器

[matthew-sun]

肥胖的根本原因是能量摄入超过能量消耗。正确的减重应该是减少脂肪组织内的脂肪，而每克脂肪会产生9大卡的热量，所以欲减少1公斤的脂肪，就医学观点来计算，就必须消耗7700大卡的热量。运动卡路里消耗计算器是运动减肥的必备工具，只要在填写您的体重和相应运动项目的时间，就可以算出今天活动消耗的卡路里。那么这个神奇的计算器是怎么制作的呢，一起来看看吧。

运动卡路里消耗计算器

卡路里消耗计算器是运动减肥的必备工具，只要在填写您的体重和相应运动项目的时间，就可以算出今天活动消耗的卡路里哦，赶紧试试吧！

点击demo查看：demo

手机扫描二维码查看：

核心算法

卡路里消耗公式：

消耗的能量（卡路里） = 体重（kg）* 运动时间（小时）*指数K

需要指出的是这个公式不是很精准，因为它忽视了年龄、性别、体质和基础代谢率等因素，只是给大家提供一个参考。

code

转换成code就是：

burnCalories = Math.floor(weight *minute/60*K);

/**
 * 指数K
 * 运动卡路里消耗数据
 * 单位（小时）：卡路里/公斤
 */

K = {
    '仰卧起坐' : 9.38 ,
    '一般健美操' : 4.02 ,
    '减肥健美操，强度较大' : 6.7 ,
    '芭蕾，现代舞，扭摆舞，爵士舞，踢踏舞，吉特巴舞' : 5.09 ,
    '快速跳舞' : 6.03 ,
    '慢慢跳舞（华尔兹，狐步）' : 2.68 ,
    '爱尔兰舞，波尔卡' : 4.69 ,
    '一般舞蹈，草裙舞，希腊舞，佛拉明哥舞，摇摆舞' : 4.69 ,
    '慢速游泳，自由式，中低强度' : 8.04 ,
    '游泳(侧泳)' : 9.38 ,
    '游泳(仰式)' : 8.04 ,
    '蛙泳，一般' : 12.06 ,
    ... // 不一一列出了，感兴趣的同学可以去我的github上扒一下源码
}

移动端适配

PC端，有很多类似工具，但是在移动端，倒是没有见到类似的产品，所以我这个“卡路里消耗计算器”主要是针对移动端的客户群体。

Icon fonts

本项目的所使用的图标，都是字体图标，PC端不敢使用的东西，终于可以在移动浏览器上大胆使用啦，放心，大多数手机浏览器都是可以很好的支持的。我这里使用的Icon fonts是Font-Awesome，看到2W+stars你就放心使用吧，基于的开源协议是MIT。

Kontext

有的同学可能觉得，这个项目中在增加运动项目的时候的专场效果非常不错，是怎么做的呢？我使用的是Kontext这个开源项目，原理是让css3和js做一下配合就可以轻松做到啦，回头我会再写一篇博文来剖析Kontext的实现原理。

一点点不爽

虽然项目很小，但是还是有大量的操作针对着dom（获取，取值，插入，删除），未来想把项目用angularjs,backbonejs,vuejs等等的mv框架进行次改装，已增进自己对mv的认识，提升自己的技术能力。