js实现计算器

最新推荐文章于 2025-04-28 09:37:33 发布
最新推荐文章于 2025-04-28 09:37:33 发布
阅读量193 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nidaye666666/article/details/103110427
版权

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="ch">
<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>
    <style>
        div{
            margin: 100px 0 0 300px;
        }
        div > p:nth-child(3) > input{
            display: inline-block;
            width: 60px;
        }
        div > p:nth-child(1){
            font: normal normal bold 12px/12px '微软雅黑';
            display: inline;
        }
        div > p:nth-child(1) > span:nth-of-type(2){
            font-size:36px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <input type="text" value="0">&nbsp;<span>+</span>&nbsp;
            <input type="text" value="0">&nbsp;=&nbsp;<span>0</span>
        </p>
        <p>
            <input type="button" value="+">
            <input type="button" value="-">
            <input type="button" value="*">
            <input type="button" value="/">
        </p>
        <p></p>
    </div>
</body>
<script>
    function Calculator(){
        this.init = {
            input_1: document.querySelector('div>p:nth-of-type(1)>input:nth-of-type(1)'),
            input_2: document.querySelector('div>p:nth-of-type(1)>input:nth-of-type(2)'),
            method: document.querySelector('div>p:nth-of-type(1)>span:nth-of-type(1)'),
            result: document.querySelector('div>p:nth-of-type(1)>span:nth-of-type(2)'),
            add: document.querySelector('div>p:nth-of-type(2)>input:nth-of-type(1)'),
            substract: document.querySelector('div>p:nth-of-type(2)>input:nth-of-type(2)'),
            multiply: document.querySelector('div>p:nth-of-type(2)>input:nth-of-type(3)'),
            divide: document.querySelector('div>p:nth-of-type(2)>input:nth-of-type(4)'),
            history: document.querySelector('div>p:nth-of-type(3)'),
            _info: function(){
                let input_1_value = this.input_1.value;
                let input_2_value = this.input_2.value;
                return [input_1_value, input_2_value];
            },
            addFun: function(){
                let argu = this._info();
                let res =  +argu[0] + +argu[1];
                this.display('+', res);
            },
            substractFun: function(){
                let argu = this._info();
                let res =  +argu[0] - +argu[1];
                this.display('-', res);
            },
            multiplyFun: function(){
                let argu = this._info();
                let res =  +argu[0] * +argu[1];  
                this.display('*', res);
            },
            divideFun: function(){
                let argu = this._info();
                let res =  +argu[0] / +argu[1];
                this.display('/', res);
            },
            display: function(method, res){
                this.method.innerHTML = method;
                this.result.innerHTML = res;
            }
        };
        function formatInput(_this, string, myself){
            let newStr = '', bool = false;
            myself.removeAttribute('style');
            for(let i of string){
                // 判断字符串是否含有除 数字、小数点 以外的字符
                let pattern_1 = /\d/g,
                    pattern_2 = /\./g;
                if(!(pattern_1.test(i) || pattern_2.test(i))){
                    myself.setAttribute('style', 'border: 2px solid red;');
                };
                // 删除多余的00, 000123 ==> 123
                if(newStr.length===0 && i==='0'){
                    continue;
                };
                // 保留第一个小数点, 1.2.3.4 ==> 1.234
                if(i === '.' && bool === false){
                    bool = true;
                    newStr += i;
                }else if(i === '.' && bool === true){
                    continue;
                }else{
                    newStr += i;
                };
            };
            // 删除多余小数点, 123. ==> 123
            if(newStr[newStr.length-1] === '.'){
                newStr = newStr.slice(0, newStr.length-1);
            };
            // 添加0, .123 ==> 0.123
            if(newStr[0] === '.'){
                newStr = '0' + newStr;
            };
            return +newStr
        }
        function addEvents(_this){
            _this.init.input_1.addEventListener('blur', function(event){
                event.target.value = formatInput(_this, event.target.value, this);
            });
            _this.init.input_2.addEventListener('blur', function(event){
                event.target.value = formatInput(_this, event.target.value, this);
            });
            _this.init.add.addEventListener('click', function(){
                _this.init.addFun();
            });
            _this.init.substract.addEventListener('click', function(){
                _this.init.substractFun();
            });
            _this.init.multiply.addEventListener('click', function(){
                _this.init.multiplyFun();
            });
            _this.init.divide.addEventListener('click', function(){
                _this.init.divideFun();
            });
        };
        addEvents(this);
    };
    Calculator.prototype.addButton = function(name){
        var target = document.querySelector('div>p:nth-of-type(2)');
        var newButton = document.createElement('input');
        newButton.setAttribute('type', 'button');
        newButton.setAttribute('value', name);
        target.appendChild(newButton);
        return newButton;
    };
    Calculator.prototype.addMethod = function(name, callback){
        let newButton = this.addButton(name);
        newButton.addEventListener('click', callback);
        return newButton;
    };
    Calculator.prototype.addHistory = function(content){
        let history = cal.init.history.innerHTML,
            myDate = new Date(),
            currentTime = myDate.toLocaleTimeString(),
            newHistory = history + currentTime + ': ' + content + ';<br/>';
        cal.init.history.innerHTML = newHistory;
    };
    // ===== ===== ===== ===== =====
    // ===== ===== ***** ===== =====
	// ===== ===== ===== ===== =====
    var cal = new Calculator();
    cal.addMethod('power', function(){
        cal.init.display('^', Math.pow(cal.init.input_1.value, cal.init.input_2.value));
    });
    cal.addMethod('clear', function(){
        cal.init.display('+', 'None');
        cal.init.input_1.value = '';
        cal.init.input_2.value = '';
    });
    cal.addMethod('colorON', function(){
        cal.init.result.setAttribute('style', 'color: red;font-size:40px;');
        cal.init.history.setAttribute('style', 'color: red;font-size:24px;width:800px;');
    })
    cal.addMethod('colorOFF', function(){
        cal.init.result.setAttribute('style', 'font-size:36px;');
        cal.init.history.setAttribute('style', 'font-size:20px;');
    });
    cal.addMethod('save', function(){
        let input_1 = cal.init.input_1.value || 'None',
            input_2 = cal.init.input_2.value || 'None',
            method = cal.init.method.innerHTML,
            result = cal.init.result.innerHTML,
            content = input_1 + ' ' + method + ' ' + input_2 + ' = ' + result;
        cal.addHistory(content);
    });
    // 此方法旨在修改error: 0.1 + 0.2 = 0.30000000000000004
    var amendBtn = cal.addMethod('amend', function(){
        function acquire_extendArgu(input_1, input_2){
            if(input_1.indexOf('.') === -1 && input_2.indexOf('.') === -1) return ;
            let slice_1 = input_1.slice(input_1.indexOf('.')+1, input_1.length),
                slice_2 = input_2.slice(input_2.indexOf('.')+1, input_2.length),
                res = slice_1 >= slice_2 ? slice_1.length : slice_2.length;
            return Math.pow(10, +res);
        }
        let res = acquire_extendArgu(cal.init.input_1.value, cal.init.input_2.value);
        cal.init.addFun = function(){
            let argu = this._info(),
                newRes =  +argu[0]*res + +argu[1]*res;
            this.display('+', newRes/res);
        };
        cal.addHistory('已经手动修复加法(0.1+0.2=0.3)');
        cal.init.add.setAttribute('style', 'color: red;');
        cal.init.method.setAttribute('style', 'color: red;');
        cal.init.method.setAttribute('style', 'color: red;');
    })
    amendBtn.setAttribute('title', '此方法旨在修改error: 0.1 + 0.2 = 0.30000000000000004');
</script>
</html>
WangKai_Code
关注
Js实现计算器
Venus_cai的博客
10-31 498
js实现网页简单计算器 <!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-U...
利用JS实现计算器基本运算
没有网络安全就没有国家安全
08-25 877
本篇文章主要讲解利用JS实现计算器基本运算
使用原生JavaScript创建简易计算器
最新发布
weixin_32287387的博客
04-28 555
JavaScript是一种由Netscape公司创建，最初被命名为LiveScript的编程语言，后与Sun Microsystems的Java合作，更名为JavaScript。它是一种轻量级的脚本语言，最初仅用于网页交互，如今已演变为一门功能强大的编程语言，可以用于服务器端开发（Node.js），桌面应用程序（Electron），以及移动应用（React Native）。
用js 实现计算器
qq_64209130的博客
03-01 613
html <div class="box clearfix " id = "box0"> <div class="shuruk"><p id="num">0</p></div> <div class="box1"> <div class="box2"> <input
js-实现计算器
weixin_45596380的博客
05-08 663
知识点 eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js计算器</title> <link href="../css/计算器.css" rel="stylesheet"> </head> <body
JS 实现计算器功能
weixin_39200549的博客
09-27 504
//style样式代码 &lt;style type="text/css"&gt; *{ margin: 0; padding: 0; list-style: none; font-size: 20px; } .calculator { width: 326px; height: 460px; margin: 80px auto; ...
javascript实现计算器功能
10-15
JavaScript实现计算器功能的知识点可以分为以下几个方面详细阐述： 1. HTML结构设计：文章中提供了一个简易计算器的HTML布局，其中使用了div元素来构建计算器的基本外观。在这个布局中，计算器被分为三个主要部分：...
js 加强 利用js实现计算器，带有正负号。
08-11
本教程将聚焦于如何利用JavaScript实现一个简单的计算器，具备正负号切换功能。通过学习这个话题，你可以深入理解JavaScript的基本语法、事件处理以及DOM操作。 首先，我们需要创建一个HTML页面作为计算器的用户...
js实现计算器功能
12-28
本文实例为大家分享了js实现计算器功能的具体代码，供大家参考，具体内容如下 知识点 eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 代码如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>js计算器</title> <link href=../css/计算器.css rel=stylesheet> </head> <body> 计算器 <form name=calcul
js实现简单计算器
05-23
使用js实现的简单计算器功能呢
基于JS的计算器实现
11-15
基于JavaScript的网页计算器实现，源代码，可完好地运行。
JAVASCRIPT实现简单计算器
weixin_33881753的博客
11-22 692
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;style&gt; /*Basic reset*/ *
JS实现计算器
XUYIGE的博客
02-01 424
HTML部分代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; p...
JS实现简单的计算器
qq_43019242的博客
06-07 251
<!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>D.
JS实现计算器：思路、步骤与实例代码解析
"JS实现计算器详解及实例代码（一）" 在JavaScript中实现一个计算器涉及到多个技术点，包括HTML布局、CSS样式以及JavaScript的核心逻辑。以下是对这个话题的详细阐述： 首先，计算器的设计通常分为以下几个部分： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值