js实现计算器

最新推荐文章于 2024-07-17 15:35:12 发布

lyu945

最新推荐文章于 2024-07-17 15:35:12 发布

阅读量174

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_62547055/article/details/138267727

版权

本文介绍了一个使用HTML和JavaScript实现的基础计算器，包括数字和运算符输入，以及错误处理功能。用户可以通过点击按钮进行加减乘除和数学运算，并能清除输入或执行相反、百分比、平方和平方根等操作。

摘要由CSDN通过智能技术生成

<!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>
        #sDiv {
            text-align: center;
            border: solid 1px;
            width: 200px;
            border-radius: 15px
        }

        #t {
            border: solid 1px;
            width: 150px;
            border-radius: 15px;
            margin: 10px 0;
            font-size: 20px;
            padding: 0 3px;
        }

        input[type=button] {

            width: 30px;
            height: 30px;
            margin: 4px;
            font-size: 20px;
        }

        #equ {
            width: 150px;
            font-size: 26px;
            padding-bottom: 30px;
        }
    </style>
</head>

<body>
    <div id="sDiv">

        <input type="text" name="box" id="box" value="" /><br />
        <input type="button" name="" id="" value="1" onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="2" onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="3" onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="4" onclick="calCulate(this.value)" /><br />
        <input type="button" name="" id="" value="5" onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="6" onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="7" onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="8" onclick="calCulate(this.value)" /><br />
        <input type="button" name="" id="" value="9" onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="0" onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="." onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="C" onclick="s(' ' )" /><br />
        <input type="button" name="" id="" value="+" onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="-" onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="*" onclick="calCulate(this.value)" />
        <input type="button" name="" id="" value="/" onclick="calCulate(this.value)" /><br />
        <input type="button" name="" id="equ" value="=" onclick="e(this.value)" />
    </div>
</body>
<script>
    input = document.getElementById('box');
    function s(v) {
        input.value = v
    }

    function calCulate(v) {
        input.value += v
    }

    function e() {
        try {
            s(eval(input.value))
        } catch (e) {
            s('Error')
        }
    }


    function operator(type) {
        switch (type) {
            case "backspace":
                var str = input.value;
                //str = (str != "0") ? str : "";
                str = str.substr(0, str.length - 1);
                str = (str != "") ? str : "0";
                input.value = str;
                break;
            case "opposite":
                input.value = -input.value;
                break;
            case "percent":
                input.value = input.value / 100;
                break;
            case "pow":
                input.value = Math.pow(input.value, 2);
                break;
            case "sqrt":
                input.value = Math.sqrt(input.value);
                break;
        }
    }
</script>

</html>

代码如上