简易计算器 - 小贤看世界

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="css/js.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            // 将数字显示在show2中。第一个数字直接+=  第二个数字需要将show2中的值进行清空
            // 输入 符号 之后 将show中的值 拼接 运算符 复制给 show1
            //   如果输入的是=就计算结果
            //   如果输入的不是=  1.先输入的是第一个符号，将show2 中的内容 拼接到 show1 中
            //                      2.如果输入的不是第一个运算  需要将将show1中的结果计算出来，并将结果显示子在show2中
        var flag = false;
        function getNumber(obj){
            if(flag){
                document.getElementById("show2").value="";
                flag=false;
            }
            //获取按钮的value值
            var value=obj.value;
            //将value赋值给show2
            document.getElementById("show2").value += value;            
        }
        
        function getType(obj){
            // 获取运算符
            var type=obj.value;
            // 如何判断是否是第二个运算符==>如果show1中有value，那么就已经输入过运算符
            if(document.getElementById("show1").value!=""){
                // show1的value 拼接 第二个数字
                var message=document.getElementById("show1").value + document.getElementById("show2").value;
                // 计算结果
                var sum=eval(message);
                // 将结算结果赋值给show2
                document.getElementById("show2").value=sum;
                // 将结果 拼接上 第二次输入运算符赋值给show1
                document.getElementById("show1").value=sum+type;
                
            }else{
                // 获取show2的value
                var show2=document.getElementById("show2").value;
                // 将 show2中数字 拼接上 符号 赋值给show1
                document.getElementById("show1").value=show2+type;
            }
            flag=true;
        }
        function clearNumber(){
            document.getElementById("show1").value="";
            document.getElementById("show2").value="";
        }
        
        </script>
    </head>
    <body>
        <div id="father">
            <h1>HYF专用计算器</h1>
            <table>
                <tr height="50px">
                    <td colspan="4">
                        <input type="text" id="show1" readonly="readonly" />
                        <br />
                        <input type="text" id="show2" readonly="readonly" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="1" class="btn" onclick="getNumber(this)" />
                    </td>
                    <td>
                        <input type="button" value="2" class="btn" onclick="getNumber(this)" />
                    </td>
                    <td>
                        <input type="button" value="3" class="btn" onclick="getNumber(this)" />
                    </td>
                    <td>
                        <input type="button" value="+" class="btn" onclick="getType(this)" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="4" class="btn" onclick="getNumber(this)" />
                    </td>
                    <td>
                        <input type="button" value="5" class="btn" onclick="getNumber(this)" />
                    </td>
                    <td>
                        <input type="button" value="6" class="btn" onclick="getNumber(this)" />
                    </td>
                    <td>
                        <input type="button" value="-" class="btn" onclick="getType(this)" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="7" class="btn" onclick="getNumber(this)" />
                    </td>
                    <td>
                        <input type="button" value="8" class="btn" onclick="getNumber(this)" />
                    </td>
                    <td>
                        <input type="button" value="9" class="btn" onclick="getNumber(this)" />
                    </td>
                    <td>
                        <input type="button" value="/" class="btn" onclick="getType(this)" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="0" class="btn" onclick="getNumber(this)" />
                    </td>
                    <td>
                        <input type="button" value="C" class="btn" onclick="clearNumber()" />
                    </td>
                    <td>
                        <input type="button" value="=" class="btn" onclick="getType(this)" />
                    </td>
                    <td>
                        <input type="button" value="*" class="btn" onclick="getType(this)" />
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

css

input[type='text'] {
    height: 35px;
    width: 264px;
    text-align: right;
    font-size: 19px;

}

.btn {
    width: 60px;
    height: 60px;
    margin-left: 5px;
    margin-top: 5px;
}

.btn1 {
    width: 129px;
    height: 60px;
    margin-left: 5px;
    margin-top: 5px;
}

#father {
    width: 272px;
    background-color: bisque;
    padding: 15px;
    padding-top: 15px;
    border: 20px cadetblue inset;
    margin-top: 50px;
    margin-left: 350px;
}

table {
    margin-top: 25px;
}

h1 {
    font-family: '楷体';
    font-weight: 900;
    color: cadetblue;
    text-align: center;
}

posted on 2022-12-29 22:56 小贤看世界阅读(111) 评论(0) 编辑收藏举报

搜索

常用链接

随笔分类

随笔档案

阅读排行榜