Js实现简单计算器

最新推荐文章于 2022-02-18 22:19:06 发布

milloc

最新推荐文章于 2022-02-18 22:19:06 发布

阅读量707

点赞数 2

分类专栏： web.js 文章标签： js

本文链接：https://blog.csdn.net/ax1232/article/details/76508440

版权

web.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

自己写的一个简单的计算器，效图如下：

效果图

大致思路：每个按钮都是对表达式的文本内容的修改，最后利用eval（）函数计算表达式的值。
源代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Caculator</title>
<style type="text/css">
    .content {
        display: block;
        position: relative;
        top: 150px;
        width: 400px;
        left: 30%;
        font-family: Consolas;
        font-weight: lighter;
        font-size: 16px;
    }
    .monitor {
        width: 400px;
        border: solid 1px black;
        text-align: right;
        background-color: #f7f7f7;
    }
    .monitor input {
        border: none;
        font-size: 30px;
        text-align: right;
        width: 380px;
        padding: 5px;
        background-color: #f7f7f7;
    }
    .monitor #expression {
        font-size: 32px;
        height: 50px;
    }
    .monitor #result {
        color: red;
    }
    .keyboard {
        width: 400px;
        display: block;
        padding-top: 10px;
        padding-left: 5px;
    }
    .keyboard span {
        border: solid 1px #cccccc;
        margin: 0px;
        display: inline-block;
        width: 20%;
        height: 40px;
        text-align: center;
        padding: 15px 5px 5px 5px;
        cursor: pointer;
    }
    .keyboard span:hover {
        background-color: cornsilk;
    }
</style>
</head>
<body>
<div class="content">
    <div class="monitor">
        <input id="expression" type="text" maxlength="200" multiple="1" value="0">
        <input id="result" type="text" maxlength="100" value="0">
    </div>
    <div class="keyboard">
        <span>AC</span>
        <span>DEL</span>
        <span>/</span>
        <span>*</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>-</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>+</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>=</span>
        <span>%</span>
        <span>0</span>
        <span>.</span>
    </div>
</div>
<script type="text/javascript">
var btns = document.getElementsByTagName('span');
var experssion = document.getElementById('expression');
var result = document.getElementById('result');
for (var i = 0;i < btns.length;i++) {
    var btn = btns[i];
    var content = btn.innerHTML.trim();
    switch (content) {
        case 'AC':
            btn.style.color = 'red';
            btn.onclick = function () {
                experssion.value = '0';
                result.value = '0';
            };
            break;
        case 'DEL':
            btn.onclick = function () {
                if (experssion.value.length <= 1) {
                    experssion.value = 0;
                } else {
                    experssion.value = experssion.value.slice(0, -1);
                }
            };
            break;
        case '=':
            btn.style = 'height:102px;float:right;right:5px;position:relative;line-height:5em;';
            btn.onclick = function () {
              try {
                  result.value = eval(experssion.value).toString();
              } catch (err) {
                  result.value = '0';
                  experssion.value = '0';
              }
            };
            break;
        case '0':;
        case '1':;
        case '2':;
        case '3':;
        case '4':;
        case '5':;
        case '6':;
        case '7':;
        case '8':;
        case '9':
            btn.onclick = (function (cont) {
                return function () {
                    if ('0' == experssion.value) {
                        experssion.value = '';
                    }
                    experssion.value += cont;
                }
            })(content);
            break;
        default:
            btn.onclick = (function (cont) {
                return function () {
                    experssion.value += cont;
                }
            })(content);
            break;
    }
}
</script>
</body>
</html>