Js实现简单计算器

来源：互联网发布：全国浓缩料2016数据编辑：程序博客网时间：2024/06/09 17:51
自己写的一个简单的计算器，效图如下：
效果图
大致思路：每个按钮都是对表达式的文本内容的修改，最后利用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>
阅读全文
0 0