文档章节

BMI计算器

犹如今生
 犹如今生
发布于 2017/06/24 16:39
字数 808
阅读 13
收藏 0

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">    
            function gm () {/*判断性别*/
                var man = document.getElementById("left-head-gender-man");
                var t = document.getElementById("t");
                if (man.checked) {
                    t.src = "js/man1.jpg";
                }
            }
            function gw () {/*判断性别*/
                var woman = document.getElementById("left-head-gender-woman");
                if (woman.checked) {
                    t.src = "img/girl0.jpg";
                }
            }
            function count () {
                /*获得身高的对象*/
                var hg = document.getElementById("left-head-height-id").value;
                /*获得体重对象*/
                var wg = document.getElementById("left-head-weight-id").value;
                /*通过身高体重的对象计算BMI值*/
                var ct = parseInt(wg)/(parseFloat(hg)*parseFloat(hg));
                /*重新获取性别对象*/
                var man = document.getElementById("left-head-gender-man");
                var woman = document.getElementById("left-head-gender-woman");
                /*分别获取需要改变的值得对象 a为最右侧上部分的胖瘦描述,b为最右侧下方显示的体重*/
                var a = document.getElementById("a");
                var b =document.getElementById("b");
                /*c 为右侧图片下方的BMI值得范围  t为右侧上方图片*/
                var c = document.getElementById("c");
                var t = document.getElementById("t");
                /*div为c 所在div的对象*/
                var div = document.getElementById("right-right");
                if (man.checked) {
                    /*通过判断分别进行替换内容*/
                    if (ct<18.5) {
                        a.innerHTML = "偏瘦";
                        b.innerHTML = wg;
                        t.src = "js/man1.jpg";
                        c.innerHTML = "BMI<18.5";
                        div.style.backgroundColor = "deepskyblue";
                    }
                    if (ct>=18.5&&ct<24) {
                        a.innerHTML = "正常";
                        b.innerHTML = wg;
                        t.src = "js/man2.jpg";
                        c.innerHTML = "18.5<=BMI<24";
                        div.style.backgroundColor = "#008000";
                    }
                    if (ct>=24&&ct<28) {
                        a.innerHTML = "过重";
                        b.innerHTML = wg;
                        t.src = "js/man3.jpg";
                        c.innerHTML = "24<=BMI<28";
                        div.style.backgroundColor = "gold";
                    }
                    if (ct>=28) {
                        a.innerHTML = "肥猪";
                        b.innerHTML = wg;
                        t.src = "js/man4.jpg";
                        c.innerHTML = "BMI>28";
                        div.style.backgroundColor = "chocolate";
                    }
                }
                if (woman.checked) {
                    if (ct<18.5) {
                        a.innerHTML = "偏瘦";
                        b.innerHTML = wg;
                        t.src = "img/girl10.jpg";
                        c.innerHTML = "BMI<18.5";
                        div.style.backgroundColor = "deepskyblue";
                    }
                    if (ct>=18.5&&ct<24) {
                        a.innerHTML = "正常";
                        b.innerHTML = wg;
                        t.src = "img/girl4.jpg";
                        c.innerHTML = "18.5<=BMI<24";
                        div.style.backgroundColor = "#008000";
                    }
                    if (ct>=24&&ct<28) {
                        a.innerHTML = "过重";
                        b.innerHTML = wg;
                        t.src = "img/girl5.jpg";
                        c.innerHTML = "24<=BMI<28";
                        div.style.backgroundColor = "gold";
                    }
                    if (ct>=28) {
                        a.innerHTML = "肥婆!";
                        b.innerHTML = wg;
                        t.src = "img/girl1.jpg";
                        c.innerHTML = "BMI>28";
                        div.style.backgroundColor = "chocolate";
                    }
                }
            }
        </script>
        <style type="text/css">
            #container{
                width: 1000px;/*主框架的宽、高*/
                height: 600px;
                background-color:darkgray ;/*填充色*/
                position: relative;/*相对定位*/
                top: 120px;
                left: 120px;
            }
            #left{
                width: 50%;
                height: 580px;
                background-color: white;
                position: absolute; /*绝对定位*/
                top: 7px;
                left: 5px;
                float: left; /*浮动*/
            }
            #left-head{
                width: 100%;
                height: 60%;
            }
            #left-head-title{
                position: absolute;
                left: 20px;
                top: 0px;
            }
            #left-head-height{
                position: absolute;
                left: 150px;
                top: 100px;
            }
            #left-head-weight{
                position: absolute;
                left: 150px;
                top: 160px;
            }
            #left-head-gender{
                position: absolute;
                left: 150px;
                top: 220px;
            }
            #left-head-result{
                width: 400px;
                height: 25px;
                position: absolute;
                left: 50px;
                top: 280px;
            }
            #left-head-result-a{
                width: 400px;
                height: 25px;
                background-color:lightpink ;/*填充色*/
                color: white;
            }
            #left-foot{
                width: 100%;
                height: 40%;
                color: white;
            }
            #left-foot-table{
                width: 100%;
                height: 100%;
            }
            #right{
                width: 48%;
                height: 580px;
                position: absolute;
                top: 7px;
                right: 5px;
                float: right;    
            }
            #right-left{
                width:180px;
                height:350px;
                position: absolute;
                top: 100px;
                left: 40px;
            }
            #right-left-foot{
                width: 180px;
                height: 50px;
                position: absolute;
                bottom: 0px;
                right: 0px;
                color: white;
                background-color:crimson ;
                text-align: center;
                line-height: 12px;
            }
            #right-right{
                width:180px;
                height:350px;
                background-color: deepskyblue;
                float: right;
                position: absolute;
                top: 100px;
                right: 40px;    
            }
            #right-right-head{
                width:180px;
                height:175px;
                text-align: center;
                line-height: 250px;
            }
            #right-right-foot{
                width:180px;
                height:175px;
                text-align: center; /*文本居中*/
                line-height: 10px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="left">
                <div id="left-head">
                    <div id="left-head-title">
                        <h1>BMI计算</h1>
                    </div>
                    <div id="left-head-height">
                        身高:<input type="text" id="left-head-height-id" />米
                    </div>
                    <div id="left-head-weight">
                        体重:<input type="text" id="left-head-weight-id" />公斤
                    </div>
                    <div id="left-head-gender">
                        性别:<input type="radio" name="sex" id="left-head-gender-man" value="man" onclick="gm()"/>男
                            <input type="radio" name="sex" id="left-head-gender-woman" value="woman" onclick="gw()" />女
                    </div>
                    <div id="left-head-result"  >
                        <input type="button" id="left-head-result-a" value="计算BMI" onclick="count()"/>
                    </div>
                </div>
                <div id="left-foot" >
                    <table border="1" cellspacing="0" cellpadding="0" id="left-foot-table" align="center" width="200px" height="5px" >
                        <tr bgcolor="black" >
                            <th>分类</th>
                            <th>BMI范围</th>
                        </tr>
                        <tr align="center" bgcolor="deepskyblue">
                            <td>偏瘦</td>
                            <td><18.5</td>
                        </tr>
                        <tr align="center" bgcolor="#008000">
                            <td>正常</td>
                            <td>18.5~23.9</td>
                        </tr>
                        <tr align="center" bgcolor="gold">
                            <td>过重</td>
                            <td>24~27.9</td>
                        </tr>
                        <tr align="center" bgcolor="chocolate">
                            <td>肥胖</td>
                            <td>>28</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="right">
                <div id="right-left">
                    <div id="right-left-head">
                        <img src="img/girl0.jpg" width="180px" height="300px" id="t"/>
                    </div>
                    <div id="right-left-foot">
                        <h2 id="c">BMI<18.5</h2>
                    </div>
                    
                </div>
                <div id="right-right" >
                    <div id="right-right-head">
                        <h1 id="a">偏瘦</h1>
                    </div>
                    <div id="right-right-foot">
                        <h1 id="b">40kg</h1>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
 

© 著作权归作者所有

上一篇: 页面自动跳转
下一篇: 定时器-图片切换
犹如今生
粉丝 0
博文 6
码字总数 1174
作品 0
深圳
私信 提问
[学习微服务-第4天]ServiceComb+Zipkin使用篇

分布式调用链追踪能有效地监控服务间的网络延时并可视化微服务中的数据流转。ServiceComb扩展了zipkin的接口提供了服务内部的链路调用信息,能提供更完整的调用链路信息,更容易定位问题和潜...

业界首个Apache微服务顶级项目
02/12
15
0
发掘数据中的信息 -- 数据探索之描述性统计

欢迎关注天善智能,我们是专注于商业智能BI,人工智能AI,大数据分析与挖掘领域的垂直社区,学习,问答、求职一站式搞定! 对商业智能BI、大数据分析挖掘、机器学习,python,R等数据领域感兴...

天善智能
2018/11/27
0
0
BMI(身体健康指数)nextInt()的弊端

import java.util.Scanner; public class BMT {public static void main(String[] args) {Scanner sc = new Scanner(System.in);int pounds, feet, inches;double heightMeters, mass, BMI;S......

CarlDing
2016/04/01
20
0
我的第一个Android应用BMI-深入浅出Android

深入浅出 Android 1入门 .... 4 初探 Android .. 4 2008 年末最大的冲击 .... 4 Android 是什么 .... 4 从创意开始 .... 5 安装 Android 开发工具 .... 7 InstallAndroid . 7 安装流程 .......

长平狐
2012/06/18
1K
0
Intel Software Development Emulator

Intel Software Development Emulator 是一款模拟Intel未来扩展指令集功能的仿真器。仿真器是基于Pin动态二进制仪器系统(和XED)。 它可以模拟在SSE4, AES,PCLMULQDQ中新的指令集功能和RTM...

叶秀兰
2013/12/08
318
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部