4.15作业---计算器

~无止境

已于 2022-04-18 11:11:03 修改

阅读量153

点赞数

文章标签： javascript css

于 2022-04-15 23:01:26 首次发布

本文链接：https://blog.csdn.net/kelouze06/article/details/124205803

版权

HTML CSS JavaScript 计算器前端开发

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #father {
            border-radius: 10%;
            margin-top: 5%;
            margin-left: 30%;
            width: 330px;
            height: 400px;
            background-color: black;
            border: 1px black solid;
        }

        #top {
            margin-top: 60px;
            margin-left: 10px;
            width: 230px;
            height: 70px;
            border: 2px red solid;
            background-color: white;
            float: left;
        }

        #exp2 {
            text-align: right;
            font-size: 20px;
            color: grey;
            width: 230px;
            height: 35px;
            background-color: rgb(26, 227, 117);
            border: 0px;
        }

        #exp1 {
            text-align: right;
            font-size: 30px;
            width: 230px;
            height: 35px;
            background-color: rgb(26, 227, 117);
            border: 0px;
        }

        #ce {
            border-radius: 40%;
            float: left;
            margin-left: 12px;
            margin-top: 60px;
            width: 60px;
            height: 70px;
            background-color: pink;
            font-size: 1.5em;
            font-weight: bolder;
            text-align: center;
        }

        button {
            border-radius: 40%;
            margin: 10px;
            width: 60px;
            height: 30px;
            float: left;
            background-color: blue;
            font-size: 1.5em;
            font-weight: bolder;
        }

        #red {
            background-color: red;

        }
        
    </style>
</head>

<body>
    <div id="father">
        <div id="top">
            <div id="text">
                <p id="exp2"></p>
                <p id="exp1"></p>
            </div>
        </div>
        <div><button id="ce" value="ce" onclick="C(this)">C</button></div>
        <table>
            <tr>
                <td><button id="del" value="del" onclick="del(this)">del</button></td>
            </tr>
            <tr>
                <td><button id="7" value="7" onclick="input(this)">7</button></td>
                <td><button id="8" value="8" onclick="input(this)">8</button></td>
                <td><button id="9" value="9" onclick="input(this)">9</button></td>
                <td><button id="+" value="+" onclick="input(this)">+</button></td>
            </tr>
            <tr>
                <td><button id="4" value="4" onclick="input(this)">4</button></td>
                <td><button id="5" value="5" onclick="input(this)">5</button></td>
                <td><button id="6" value="6" onclick="input(this)">6</button></td>
                <td><button id="-" value="-" onclick="input(this)">-</button></td>
            </tr>
            <tr>
                <td><button id="1" value="1" onclick="input(this)">1</button></td>
                <td><button id="2" value="2" onclick="input(this)">2</button></td>
                <td><button id="3" value="3" onclick="input(this)">3</button></td>
                <td><button id="*" value="*" onclick="input(this)">*</button></td>
            </tr>
            <tr>
                <td><button id="0" value="0" onclick="input(this)">0</button></td>
                <td><button id="." value="." onclick="input(this)">.</button></td>
                <td><button id="red" value="=" onclick="cal(this)">=</button></td>
                <td><button id="/" value="/" onclick="input(this)">/</button></td>
            </tr>
            
    </div>
</body>


<script>
    function input(obj) {
        document.getElementById("exp1").innerHTML += obj.value;
    }
    function cal(obj) {
        document.getElementById("exp2").innerHTML = document.getElementById("exp1").innerHTML;
        var exp = document.getElementById("exp1").innerHTML;
        document.getElementById("exp1").innerHTML = eval(exp);
    }
    function C(obj) {
        document.getElementById("exp1").innerHTML="";
        document.getElementById("exp2").innerHTML="";
    }
    function del(obj) {
        var exp = document.getElementById("exp1").innerHTML;
        var newExp = exp.substring(0,exp.length-1);
        document.getElementById("exp1").innerHTML = newExp;
    }

</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #father {
            border-radius: 10%;
            margin-top: 5%;
            margin-left: 30%;
            width: 330px;
            height: 350px;
            background-color: black;
            border: 1px black solid;
        }

        #top {
            margin-top: 60px;
            margin-left: 10px;
            width: 230px;
            height: 70px;
            border: 2px red solid;
            float: left;
        }

        #text1 {
            text-align: right;
            font-size: 20px;
            color: grey;
            width: 230px;
            height: 35px;
            background-color: rgb(26, 227, 117);
            border: 0px;
        }

        #text2 {
            text-align: right;
            font-size: 30px;
            width: 230px;
            height: 35px;
            background-color: rgb(26, 227, 117);
            border: 0px;
        }

        #c input {
            border-radius: 40%;
            float: left;
            margin-left: 12px;
            margin-top: 60px;
            width: 60px;
            height: 70px;
            background-color: pink;
            font-size: 1.5em;
            font-weight: bolder;
            text-align: center;
        }

        tr input {
            border-radius: 40%;
            margin: 10px;
            width: 60px;
            height: 30px;
            float: left;
            background-color: blue;
            font-size: 1.5em;
            font-weight: bolder;
        }

        #red {
            background-color: red;

        }
    </style>
</head>

<body>
    <div id="father">
        <div id="top">
            <div id="text">
                <input id="text1" type="text" value="">
                <input id="text2" type="text" value=0>
            </div>

        </div>
        <div id="c"><input type="button" value="C" onclick="zero()" /></div>
        <table>
            <tr>
                <td><input type="button" value="7" onclick="input(this)" /></a></td>
                <td><input type="button" value="8" onclick="input(this)" /></td>
                <td><input type="button" value="9" onclick="input(this)" /></td>
                <td><input type="button" value="+" onclick="input(this)" /></td>
            </tr>
            <tr>
                <td><input type="button" value="4" onclick="input(this)" /></td>
                <td><input type="button" value="5" onclick="input(this)" /></td>
                <td><input type="button" value="6" onclick="input(this)" /></td>
                <td><input type="button" value="-" onclick="input(this)" /></td>
            </tr>
            <tr>
                <td><input type="button" value="1" onclick="input(this)" /></td>
                <td><input type="button" value="2" onclick="input(this)" /></td>
                <td><input type="button" value="3" onclick="input(this)" /></td>
                <td><input type="button" value="*" onclick="input(this)" /></td>
            </tr>
            <tr>
                <td><input type="button" value="0" onclick="input(this)" /></td>
                <td><input type="button" value="." onclick="input(this)" /></td>
                <td><input id="red" type="button" value="=" onclick="input(this)" /></td>
                <td><input type="button" value="/" onclick="input(this)" /></td>
            </tr>
    </div>

    <script>
        var str1 = "";
        var str2;
        var result1;
        var result2;
        function input(number) {
            result1 = document.getElementById("text1");
            result2 = document.getElementById("text2");
            result1.value = "";
            str2 = "";
            var num = number.value;
            if (num == "=") {
                str2 = str1 + "=";
                result1.value = str2;
                str1 = eval(str1);
                result2.value = str1;
            } else {
                str1 += num;
                result2.value = str1;
            }
        }

        function zero() {
            str1 = "";
            str2 = "";
            result1.value = "";
            result2.value = 0;
        }

    </script>
</body>

</html>