js实现计算器

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

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

效果如下

js实现计算器_第1张图片

代码如下

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>Documenttitle>
    <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>delbutton><button>Cbutton>
        div>
        <div>
            <button>7button><button>8button>
            <button>9button><button>+button>
        div>
        <div>
            <button>4button><button>5button>
            <button>6button><button>-button>
        div>
        <div>
            <button>1button><button>2button>
            <button>3button><button>*button>
        div>
        <div>
            <button>0button><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>

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

你可能感兴趣的:(javascript,前端,css3)