一个js写的计算器

2021-03-03 19:33:11 阅读：163 来源： 互联网

标签：一个 js color innerText result background 计算器 20px margin

<!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>

效果图：

标签：一个,js,color,innerText,result,background,计算器,20px,margin
来源： https://www.cnblogs.com/bxynlbyx/p/14476428.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

一个js写的计算器