HTML简单计算器实现

最新推荐文章于 2024-07-31 22:41:01 发布

我是噢噢噢

最新推荐文章于 2024-07-31 22:41:01 发布

阅读量4.5k

点赞数 1

分类专栏： JavaScript 文章标签： html js

本文链接：https://blog.csdn.net/qq_43558459/article/details/107078498

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这款计算器的主要功能有加减乘除，平方开方，清零，回退，连续加减乘除等功能。
成品图如下：
在这里插入图片描述
功能模块图如下：

整体用一个table标签创建一个五行六列的表格，这里上HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>

<body>
    <!--1.加减乘除2.乘方开放3.退格清零4.连加连减-->
    <table id="calculator" οnclick="result(event)">
        <tr>
            <td colspan="6">
                <input type="text" class="content">
            </td>
        </tr>
        <tr>
            <td><button class="numb" οnclick="buttonClick(this)" value="1">1</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="2">2</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="3">3</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="+">+</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="(">(</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value=")">)</button></td>
        </tr>
        <tr>
            <td><button class="numb" οnclick="buttonClick(this)" svalue="4">4</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="5">5</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="6">6</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="-">-</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="C">C</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="Back">Back</button></td>
        </tr>

        <td><button class="numb" οnclick="buttonClick(this)" value="7">7</button></td>
        <td><button class="numb" οnclick="buttonClick(this)" value="8">8</button></td>
        <td><button class="numb" οnclick="buttonClick(this)" value="9">9</button></td>
        <td><button class="numb" οnclick="buttonClick(this)" value="*">*</button></td>
        <td><button class="numb" οnclick="buttonClick(this)">x<sup>2</sup></button></td>
        <td rowspan="2"><button class="numb" οnclick="buttonClick(this)" value="=">=</button></td>
        </tr>
        <tr>
            <td><button class="numb" οnclick="buttonClick(this)" value=".">.</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="0">0</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="00">00</button></td>
            <td><button class="numb" οnclick="buttonClick(this)" value="/">/</button></td>
            <td><button class="numb" οnclick="buttonClick(this)">&radic;x</button></td>
        </tr>
    </table>
    <div id="audio-box"></div>
    <script src="js/calculator.js"></script>
</body>

</html>

下面是CSS代码：

* {
    margin: 0;
    padding: 0;
}

/*body背景色*/

body {
    width: 100%;
    background: -webkit-linear-gradient(left, #2b5876, #4e4376);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(left, #2b5876, #4e4376);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(left, #2b5876, #4e4376);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(left, #2b5876, #4e4376);
    /* 标准的语法（必须放在q最后） */
}

/*table部分*/

table {
    width: 460px;
    height: 470px;
    margin: 100px auto;
}

table tr {
    width: 100%;
    height: 20%;
}

table tr td {
    box-sizing: border-box;
    width: 16.66%;
    font-size: 20px;
    color: #d7d2cc;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 0px 4px #F7F7F9 inset;
}

table tr button {
    width: 100%;
    height: 100%;
    outline: none;
    background-color: transparent;
    border: none;
    font-size: 20px;
    color: #d7d2cc;
    cursor: pointer;
}

table tr button:hover {
    opacity: 0.6;
    background: linear-gradient(45deg, #2b5876, #4e4376);
}

/*屏幕显示部分*/

table td input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 20px;
    color: #d7d2cc;
    text-align: right;
}

然后是JS部分，主要是注册一个点击事件，通过获取触发事件的innerHTML来判断接下来的操作
在这里插入图片描述
具体代码：

//计算功能
function result(e) {
    //获取触发事件的元素
    //利用e.target||e.srcElement，获取到触发事件的元素，||连接两个语法是为了解决不同浏览器的兼容性问题。
    var obj = e.target || e.srcElement;
    if (obj.nodeName != "BUTTON") {
        return;
    }
    var v = obj.innerHTML;
    var content = document.querySelector('.content');
    if (v === "C") {
        content.value = 0;
    } else if (v === "=") {
        //获取到输入框的值
        var exp = content.value;
        //这里用try catch抛出异常，针对运算错误的情况
        try {
            var result = eval("(" + exp + ")");
            //将计算结果赋值给输入框
            content.value = result;
        } catch (e) {
            console.log(e);
            content.value = "error";
        }
    } else if (v === "x<sup>2</sup>") {
        var result = Math.pow(content.value, 2);
        content.value = result;
    } else if (v === "√x") {
        var result = Math.sqrt(content.value);
        content.value = result;
    } else if (v === "Back") {
        var str = content.value;
        var result = str.substring(0, str.length - 1);
        content.value = result;
    }

    else {
        if (content.value === "0")
            content.value = " ";
        content.value += v;
    }
}

function buttonClick(obj) {
    //点击键有声音效果
    document.querySelector('#audio-box').innerHTML = "<audio src='music/cNumber.mp3' controls='controls' autoplay='autoplay' style='display:none;'></audio>";
}