JavaScript最简单的计算器，复制代码即可查看效果，内含丰富注释！

本文链接：https://blog.csdn.net/hpy688/article/details/109403015

<html>
<head>
    <title>简单计算器</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        background-color: #2d3436;
    }
    .jisuan{
        height: 650px;
        width: 400px;
        background-color: #636e72;
    }
    .jisuan input{
        border: none;
        font-size: 32px;
        outline: none;
        height: 150px;
        width: 100%;
        background-color: #fff;
    }
    .btn{
        position: relative;
        top:-500px;
        height: 500px;
        width: 400px;
    }
    .btn button{
        border: none;
        outline: none;
        height: 100px;
        width: 100px;
        float: left;
        color: #fff;
        font-size: 30px;
        background-color: #353b48;
        transition: all 0.05s linear;
    }
    .btn button:active{
        background-color: #00b894;
    }
    .index{
        position: absolute;
        top: 10%;
        margin-left:37%;
    }
</style>
<body>
<div class="index">
    <div class="jisuan">
        <input type="text" id="ipt">

    </div>
    <div class="btn">
        <button type="button" οnclick="a(this.innerHTML)">1</button>
        <button type="button" οnclick="a(this.innerHTML)">2</button>
        <button type="button" οnclick="a(this.innerHTML)">3</button>
        <button type="button" style="background-color: #d63031" οnclick="del()">C</button>
        <button type="button" οnclick="a(this.innerHTML)">4</button>
        <button type="button" οnclick="a(this.innerHTML)">5</button>
        <button type="button" οnclick="a(this.innerHTML)">6</button>
        <button type="button" οnclick="a(this.innerHTML)">-</button>
        <button type="button" οnclick="a(this.innerHTML)">7</button>
        <button type="button" οnclick="a(this.innerHTML)">8</button>
        <button type="button" οnclick="a(this.innerHTML)">9</button>
        <button type="button" οnclick="a(this.innerHTML)">+</button>
        <button type="button" οnclick="a(this.innerHTML)">*</button>
        <button type="button" οnclick="a(this.innerHTML)">0</button>
        <button type="button" οnclick="a(this.innerHTML)">00</button>
        <button type="button" οnclick="a(this.innerHTML)">/</button>
        <button type="button" style="float: right;height: 80px;width: 200px;background-color: #0984e3;" οnclick="res()">=</button>
        <button type="button" style="float: left;height:80px;width:200px;background-color: #dfe6e9;color: #000" οnclick="BS()">←</button>
    </div>
</div>
</body>
<script>
    var ipt = document.getElementById('ipt')
    //点击任何按钮，增加按钮的标题也就是innerHTML;
    //b就是我们在函数中填写的this,innerHTML
    //我们直接用b代表.
    function a(b){
        ipt.value=ipt.value+b;
    }
    //这是一个清空函数，让ipt的value等于一个“ ”也就是无
    function del(){
        ipt.value="";
    }
    //这个是等于号的操作，是我们求出结果的函数
    function res(){
        ipt.value=eval(ipt.value);//eval()方法可以计算字符串中的数字，我们的计算器用它最合适不过了。
        console.log('结果是'+ipt.value)//输出一下结果
    }
    //这个是一点一点减少ipt的value的长度的函数
    function BS(){
        ipt.value=ipt.value.slice(0,ipt.value.length-1);//我们用到了截取字符串的slice()函数。
    }