一个js写的计算器

时间：2021-03-04 13:13:41 收藏：0 阅读：0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var display;
        var result="";
        var calresults;
        display=document.getElementById("xianshi");
        function calculator(){
        result+=event.srcElement.innerText;
        // alert(result);
        xianshi.innerText=result;

        }
        function resultscalcaulte(){
        var display=document.getElementById("xianshi");
        calresults=eval(result);
        //eval()函数可以计算某个字符串，并执行其中的js代码
        //语法eval（string）
        //返回值通过计算string得到的值
        //该方法只接受原始字符串作为参数，如果string参数不是原始字符串，
        //那么该方法将不作任何改变的返回，不要为eval（）函数传递String对象来作为参数 
        display.innerText=calresults;
        }
        function empty(){
        result="";
        xianshi.innerText=result;
        }
        function back(){
            if (result!="") {
                result=result.substring(0, result.length - 1);
                xianshi.innerText=result;
            }
        }
    </script>
    <style>
        .display{
            font-size: 40px;
            text-align: right;
            padding-top: 20px;
        }
        #outer{
            background-color: beige;
            height: 500px;
            width: 400px;
            margin: 0 auto;
            padding-top: 20px;
        }
        #screen{
            background-color: gray;
            height: 100px;
            width: 340px;
            margin: 0 auto;
        }
        #calcula{
            background-color: gray;
            height: 350px;
            width: 340px;
            margin: 0 auto;
            margin-top: 20px;
            padding-top: 25px;
        }
        table{
            margin: 0px 20px 20px 20px;
        }
        td{
            
            color: cadetblue;
            background-color: beige;
            height: 60px;
            width: 75px;
            text-align: center;
        }
        td:active{
            background-color: grey;
        }

        
    </style>
</head>
<body>
    <div id="outer">
        <div id="screen">
      
            <div id="xianshi" class="display"></div>
        </div>
        <div id="calcula">
            <table>
                <tr>
                    <td onclick="calculator()">+</td>
                    <td onclick="calculator()">-</td>
                    <td onclick="calculator()">*</td>
                    <td onclick="calculator()">/</td>
                </tr>
                <tr>
                    <td onclick="calculator()">7</td>
                    <td onclick="calculator()">8</td>
                    <td onclick="calculator()">9</td>
                    <td rowspan="3" onclick="resultscalcaulte()">=</td>
                </tr>
                <tr>
                    <td onclick="calculator()">4</td>
                    <td onclick="calculator()">5</td>
                    <td onclick="calculator()">6</td>
                    
                </tr>
                <tr>
                    <td onclick="calculator()">1</td>
                    <td onclick="calculator()">2</td>
                    <td onclick="calculator()">3</td>
                    
                </tr>
                <tr>
                    <td onclick="empty()">C</td>
                    <td onclick="calculator()">0</td>
                    <td onclick="calculator()">.</td>
                    <td onclick="back()">D</td>
                </tr>
            </table>
            
        </div>
    </div>
</body>
</html>
效果图：
技术图片