js实现计算器

最新推荐文章于 2024-04-27 05:36:48 发布

荏苒的光阴

最新推荐文章于 2024-04-27 05:36:48 发布

阅读量9.7k

点赞数 11

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_44360449/article/details/121980008

版权

一、使用javascript实现简易版计算器

本来是一个风和日丽的下午，像往常一样摸着鱼。恍惚间，我想起了自己在校园时没有能够做出来的js计算器效果。心血来潮，觉得可以再度尝试搞一手（顺着思路随便写的，所以还有一些地方可以进行代码重构和优化）

效果如下

在这里插入图片描述

代码如下

<!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>Document</title>
    <style>
        .container {
            width: 300px;
            height: 400px;
        }
        .container div {
            display: flex;
        }
        .input {
            width: 100%;
        }
        .input>input {
            width: 99%;
            margin: 0.1%;
            height: 50px;
        }
        button {
            height: 60px;
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="input"><input type="text"></div>
        <div>
            <button>del</button><button>C</button>
        </div>
        <div>
            <button>7</button><button>8</button>
            <button>9</button><button>+</button>
        </div>
        <div>
            <button>4</button><button>5</button>
            <button>6</button><button>-</button>
        </div>
        <div>
            <button>1</button><button>2</button>
            <button>3</button><button>*</button>
        </div>
        <div>
            <button>0</button><button>.</button>
            <button>=</button><button>/</button>
        </div>
    </div>

    <script>
        let btns = document.getElementsByTagName('button');
        let input = document.querySelector("input");
        let len = btns.length;
        let a,b,result,type;
        for(let i = 0;i < len;i++) {
            btns[i].addEventListener('click',()=> {
              let val = btns[i].innerHTML;
              let value = input.value;
              if(val >= 0 && val <= 9 || val === "." 
              && value.indexOf(".") === -1) {
                  input.value += val;
              }
              if(value === "" && val === ".") {
                input.value = "";
              }
              if(value !== "") {
                switch(val) {
                    case "del":
                        let str = value.substring(0,value.length - 1);
                        input.value = str;
                        break;
                    case "C":
                        input.value = "";
                        break;
                    case "+":
                        a = value;
                        input.value = "";
                        type = "+";
                        break;
                    case "-":
                        a = value;
                        input.value = "";
                        type = "-";
                        break;
                    case "*":
                        a = value;
                        input.value = "";
                        type = "*";
                        break;
                    case "/":
                        a = value;
                        input.value = "";
                        type = "/";
                        break;
                    case "=":
                        if(a !== undefined) {
                            b = value;
                            if(type === "+") {
                                result = parseFloat(a) + parseFloat(b);
                            }
                            if(type === "-") {
                                result = parseFloat(a) - parseFloat(b);
                            }
                            if(type === "*") {
                                result = parseFloat(a) * parseFloat(b);
                            }
                            if(type === "/") {
                                result = parseFloat(a) / parseFloat(b);
                            }
                            let newStr = result + "";
                            let arr = newStr.split(".");
                            input.value = arr.length === 2 ?
                             result.toFixed(2) : result;
                        }
                        break;
                }
              }
              
            })
        }
    </script>
</body>
</html>

如果有好的建议或意见可以一起交流，谢谢大家

荏苒的光阴

关注

11
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
js实现计算器

一、使用javascript实现简易版计算器本来是一个风和日丽的下午，像往常一样摸着鱼。恍惚间，我想起了自己在校园时没有能够做出来的js计算器效果。心血来潮，觉得可以再度尝试搞一手（顺着思路随便写的，所以还有一些地方可以进行代码重构和优化）效果如下代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co
复制链接

扫一扫