面向对象思想实现简易计算器

最新推荐文章于 2025-05-02 11:51:07 发布

luo15256533579

最新推荐文章于 2025-05-02 11:51:07 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：面向对象文章标签：面向对象

本文链接：https://blog.youkuaiyun.com/luo15256533579/article/details/78441050

面向对象专栏收录该内容

1 篇文章

订阅专栏

这个博客通过HTML、CSS和JavaScript实现了一个简单的计算器。它使用面向对象的思想，定义了一个calculator对象，包含了输入框、操作符、结果显示等元素，并实现了加、减、乘、除等基本运算。此外，还通过自定义接口扩展了模运算和求倒数的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            background: #e2e2e2;
        }
        *{
            margin: 10px;
        }
        .wrap{
            margin:200px auto;
            width: 600px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div id="top">
            <input type="text" id="former">
            <span id="operator"></span>
            <input type="text" id="laster">
            <span>=</span>
            <span class="result"></span>
        </div>
        <div id="bottom">
            <button id="add">+</button>
            <button id="subtract">-</button>
            <button id="multiply">×</button>
            <button id="divide">÷</button>
            <button id="mod">%</button>
            <button id="reverse">1/x</button>
        </div>
    </div>
    <script type="text/javascript">
    var operation;
    (function(){
        var calculator={
            former:document.getElementById('former'),
            laster:document.getElementById('laster'),
            operator:document.getElementById('operator'),
            result:document.querySelector('.result'),     
            btns:document.getElementsByTagName('button'),
            bottom:document.getElementById('bottom')
        }
        var operate={
            add:function(num1,num2){
                return num1+num2;
                },
            subtract:function(num1,num2){
                return num1-num2;
                },
            multiply:function(num1,num2){
                return num1*num2;
                },
            divide:function(num1,num2){
                return num1/num2;
                },
            addoperate:function(name,fn){
                if(!operate[name]){
                    operate[name]=fn;
                }else{
                    throw new Error('已有该方法');
                }
            }
        }
           
        calculator.bottom.onclick=function(){
            changeOperator(event.target.innerHTML);
            changeResult(calculate(event.target.id,+calculator.former.value,+calculator.laster.value));
        }

        
        function changeOperator(content){
            calculator.operator.innerHTML=content;
        }
        function changeResult(content){
            calculator.result.innerHTML=content;
        }
        function calculate(name){
            return operate[name](...[].slice.call(arguments,1));
        }

        //接口
        operation=operate.addoperate;

    })();


    operation('mod',function(num1,num2){
        return num1%num2;
    });
    operation('reverse',function(num1){
        return 1/num1;
    });

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