用JavaScript实现简单的计算器

来源：互联网发布：超级大傻瓜软件编辑：程序博客网时间：2024/04/30 00:39

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>计算器</title>    <link rel="stylesheet" type="text/css" href="calculator2.css"></head><body>    <div class="result-area">        <input id="result" class="result" type="text" readonly>    </div>    <div class="btn-area">        <button id="btn1" class="btn-top" onclick="append(this)">1</button>        <button id="btn2" class="btn-top" onclick="append(this)">2</button>        <button id="btn3" class="btn-top" onclick="append(this)">3</button>        <button id="btn-add" class="btn-top-right" onclick="append(this)">+</button>        <button id="btn4" class="btn" onclick="append(this)">4</button>        <button id="btn5" class="btn" onclick="append(this)">5</button>        <button id="btn6" class="btn" onclick="append(this)">6</button>        <button id="btn-sub" class="btn-right" onclick="append(this)">-</button>        <button id="btn7" class="btn" onclick="append(this)">7</button>        <button id="btn8" class="btn" onclick="append(this)">8</button>        <button id="btn9" class="btn" onclick="append(this)">9</button>        <button id="btn-mul" class="btn-right" onclick="append(this)">*</button>        <button id="btn0" class="btn" onclick="append(this)">0</button>        <button id="btn-clear" class="btn" onclick="clr()">C</button>        <button id="btn-equal" class="btn" onclick="equal()">=</button>        <button id="btn-div" class="btn-right" onclick="append(this)">/</button>        <button id="btn-left-bracket" class="btn" onclick="append(this)">(</button>        <button id="btn-right-bracket" class="btn" onclick="append(this)">)</button>        <button id="btn-point" class="btn" onclick="append(this)">.</button>        <button id="btn-mod" class="btn-right" onclick="append(this)">%</button>    </div></body><script type="text/javascript" src="calculator2.js"></script></html>

CSS代码

*{    margin: 0;    padding: 0;}.result-area{    width: 306px;    margin: 60px auto 0;}.result{    width: 304px;    height: 40px;    border: 1px solid #ccc;    text-align: right;    line-height: 40px;    font-size: 2em;    outline: none;}.btn-area{    width: 306px;    height: 200px;    margin: 20px auto 0;}button{    width: 75px;    height: 40px;    border: 1px solid #ccc;    font-size: 2em;    outline: none;    float: left;}.btn-top{    margin-right: 2px;}.btn{    margin-right: 2px;    border-top: 0;}.btn-right{    border-top: 0;}

JavaScript代码

var result = document.getElementById("result");// 按下键向显示框添加键上的数字或符号function append(obj) {    var btnText = obj.innerText;    var resultText = result.value;        if(!inputValid(resultText, btnText)) {        alert("输入不合法");        return;    }    result.value = result.value + btnText;}// 按下清除按钮后清除显示框的内容function clr() {    result.value = "";}// 按下等于键计算显示框表达式的值function equal() {    if(dividedBy0(result.value)) {        alert("除数不能为0");        clr();        return;    }    try {        result.value = parseFloat(eval(result.value).toFixed(8));    } catch(e) {        alert("输入不合法");    }}// 判断输入是否合法,如果输入不完整,那么补"0"或右括号或"0"和右括号结合使表达式完整function inputValid(str, ch) {    var exp = str + ch;    try {        eval(exp);        return true;    } catch(e) {        try {            eval(exp + "0");            return true;        } catch(e) {            try {                eval(exp + rightBracketsToFill(exp));                return true;            } catch(e) {                try {                    eval(exp + "0" + rightBracketsToFill(exp));                    return true;                } catch(e) {                    return false;                }            }        }    }}// 获得需要补齐的右括号的数量,并拼接右括号function rightBracketsToFill(str) {    var l = 0;    var r = 0;    for(var i = 0; i < str.length; i++) {        var ch = str.charAt(i);        if(ch == "(") {            l++;        }        if(ch == ")") {            r++;        }    }    var rightBrackets = "";    for(var i = 0; i < l - r; i++) {        rightBrackets = rightBrackets + ")";    }    return rightBrackets;}// 导致除数为0的子字符串可能是"/0" "%0" "/.0" "%.0"function dividedBy0WithFormat(str, sub) {    var index = str.indexOf(sub);    if(index < 0) {        return false;    }    if(index + sub.length == str.length) {        return true;    }    for(var i = index + sub.length; i < str.length; i++) {        var ch = str.charAt(i);        if(isNaN(ch) && ch != ".") {            return true;        }        if(!isNaN(ch) && ch > 0) {            return false;        }    }    return true;}// 判断除数是否为0function dividedBy0(str) {    return dividedBy0WithFormat(str, "/0") || dividedBy0WithFormat(str, "%0")        || dividedBy0WithFormat(str, "/.0") || dividedBy0WithFormat(str, "%.0");}

0 0