自己做的javascript简易计算器

html

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

<head>
    <meta charset="UTF-8">
    <title>javascript任务2-简易计算器</title>
    <link rel="stylesheet" href="style/demo.css">
</head>

<body>
    <div class="counter">
        <table width="100%" border="1">
            <tr>
                <td>
                    <input type="button" value="c" class="cancle" onclick="clearNote()">
                </td>
                <td colspan="3" align="right" class="screen">
                <!-- 计算器运算过程显示位置 -->
                    <div id="process"></div>
                    <!-- 计算器显示屏，显示结果和用户输入 -->
                    <input type="text" readonly="readonly" value="0" id="note">
                </td>
            </tr>
            <tr>
                <td>
                    <!-- 数字7 -->
                    <input type="button" value="7" onclick="countSHow(this)">
                </td>
                <td>
                    <!-- 数字8 -->
                    <input type="button" value="8" onclick="countSHow(this)">
                </td>
                <td>
                    <!-- 数字9 -->
                    <input type="button" value="9" onclick="countSHow(this)">
                </td>
                <td>
                    <!-- 除 -->
                    <input type="button" value="÷" onclick="operationShow(this)">
                </td>
            </tr>
            <tr>
                <td>
                    <!-- 数字4 -->
                    <input type="button" value="4" onclick="countSHow(this)">
                </td>
                <td>
                    <!-- 数字5 -->
                    <input type="button" value="5" onclick="countSHow(this)">
                </td>
                <td>
                    <!-- 数字6 -->
                    <input type="button" value="6" onclick="countSHow(this)">
                </td>
                <td>
                    <!-- 乘 -->
                    <input type="button" value="x" onclick="operationShow(this)">
                </td>
            </tr>
            <tr>
                <td>
                    <!-- 数字1 -->
                    <input type="button" value="1" onclick="countSHow(this)">
                </td>
                <td>
                    <!-- 数字2 -->
                    <input type="button" value="2" onclick="countSHow(this)">
                </td>
                <td>
                    <!-- 数字3 -->
                    <input type="button" value="3" onclick="countSHow(this)">
                </td>
                <td>
                    <!-- 加 -->
                    <input type="button" value="+" onclick="operationShow(this)">
                </td>
            </tr>
            <tr>
                <td>
                    <!-- 数字0 -->
                    <input type="button" value="0" onclick="countSHow(this)">
                </td>
                <td>
                    <!-- 小数点 -->
                    <input type="button" value="." onclick="dot()">
                </td>
                <td>
                    <!-- 等于 -->
                    <input type="button" value="=" onclick="result()">
                </td>
                <td>
                    <!-- 减 -->
                    <input type="button" value="-" onclick="operationShow(this)">
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript" src="demo.js"></script>
</body>

</html>

javascript

/*
简易计算器：
可运算加、减、乘、除
*/
num1 = 0; //保存第一值
num2 = 0; //保存第二值
op = ""; //保存运算符
opresult = 0; //保存结果，用于连续计算
opScreen = document.getElementById("note");
/*
思路：第一次点击运算符时，记录第一值和运算符，按等号记录第二值并计算
*/

/*按数字的屏幕显示控制：如果屏幕显示是0，按n替换为n，显示不为0则追加字符 */
function countSHow(n) {
    if (opScreen.value == "0" || opScreen.value == num1 || opScreen.value == "除数不为0") {
        opScreen.value = n.value;
    } else {
        opScreen.value += n.value;
    };

}

/*按点时的屏幕显示控制：已存在'.'，则不加'.'，否则追加'.'*/
function dot() {
    var screenText = opScreen.value;
    if (screenText.indexOf(".") < 0) {
        opScreen.value += ".";
    }

}

//一按运算符，计算器顶部显示运算过程，并更新num1和运算符
function operationShow(o) {
    num1 = opScreen.value;
    op = o.value;
    document.getElementById("process").innerHTML = num1 + op;
}


/*等于，计算并在显示屏输出结果*/
function result() {
    num2 = opScreen.value;
    switch (op) {
        case "÷":
            opresult = divide(num1, num2);
            break;

        case "x":
            opresult = times(num1, num2);
            break;

        case "+":
            opresult = plus(num1, num2);
            break;

        case "-":
            opresult = minus(num1, num2);
            break;
    }

    opScreen.value = opresult;
}


/*加*/
function plus(x, y) {
    return parseFloat(x) + parseFloat(y);
}


/*减*/
function minus(x, y) {
    return x - y;
}

/*乘*/
function times(x, y) {
    return x * y;
}


/*除*/
function divide(x, y) {
    if (y == "0") {
        return "除数不为0";
    } else {
        return x / y;
    }
}


/*重置*/
function clearNote() {
    opScreen.value = "0";
    document.getElementById("process").innerHTML = "";
    num1 = 0;
    num2 = 0;
    op = "";
    opresult = 0;
}

style

.counter {
    width: 300px;
    margin: 100px auto;
    background: #9DD2E8;
    padding: 5px;
}

.counter table,
.counter td {
    border: none;
}

.counter td {
    width: 20%;
}

.counter input[type="button"] {
    width: 100%;
    height: 50px;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.cancle {
    background: #FCA0A8;
}

#process {
    height: 20px;
}

.screen {
    background: #79A6B9;
    color: #fff;
    padding-right: 10px;
}

.screen input {
    background: #79A6B9;
    border: none;
    text-align: right;
    color: #fff;
    font-size: 20px;
    width: 100%;
}

 

posted @ 2015-09-23 15:02  tinyphp  Views(1325)  Comments(0)  Edit  收藏  举报