if...else_if...else…-CSDN博客

本文链接：https://blog.csdn.net/qq_30952719/article/details/78343563

if…else 练习

这里写代码片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>if..else</title>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <style type="text/css">
            *{ margin: 0; padding: 0;}
            .content{ max-width: 900px;  height:100%;margin: 0 auto; background-color: #0C4B62; color: #fff;}
            .scoreBox{ height: 300px; display: flex; align-items: center; }
            .scoreBox>label{ line-height: 34px;;}
            .scoreBox>input{ height: 34px; line-height: 34px; padding-left:10px ; margin-right: 20px;}
            .scoreBox>span{ width:200px; display: inline-block; border-bottom:1px #fff solid ; height: 34px;; line-height: 34px;;}
            .scoreBox>span:after{ border: 1px #101010 solid; }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="scoreBox">
                <label for="">小明的成绩：</label>
                <input type="number"  alt="输入成绩"/>
                <button onclick="score()">成绩优良</button>

                <span class="score"></span>
            </div>
            <div class="box1">

            </div>
        </div>
        <script type="text/javascript">
            function score(){

                var a=$("input[type='number']").val()/1;
                if(a<=100&&a>=0){   
                    if(a>=90){
                        $("span").text("成绩为优");
                    }
                    if(a<90&&a>80){
                        $("span").text("成绩为良好");
                    }
                    if( a<=80&&a>60){
                        $("span").text("成绩为及格");
                    }
                    if(a<=60){
                        $("span").text("成绩为不及格");
                    }
                }
                else{$("span").text("请输入0-100之间的数");}
            }
            function obj(point){
                alert("box的 横坐标为："+point.x+"box的 纵坐标为："+point.y);
            }

        </script>
    </body>
</html>