效果展示

可以实现的计算功能包含：

All clear 、 clear 、百分比、加、减、乘、除、取负数、小数

php/html+css+js制作计算器效果展示完整代码思考总结

完整代码

代码结构

HTML/PHP代码:calculator.html

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>php/html+css+js制作计算器</title>
  <link rel="stylesheet" href="css/calculator.css">
</head>

<body>
  <!-- 计算器 -->
  <div id="calculator">
    <table>
      <!-- 显示区 -->
      <tr id="display">
        <td align="center" colspan="4"><input type="text" readonly="readonly" value="0" id="note"></td>
      </tr>
      <!-- 按钮区 -->
      <tr class="func">
        <td align="center" ;><input type="button" class="btno" value="AC" id="aclear" onclick="clearNote(this)"></td>
        <td align="center" ;><input type="button" class="btno" value="+/-" onclick="negate(this)"></td>
        <td align="center" ;><input type="button" class="btno" value="%" onclick="percent()"></td>
        <td align="center" ;><input type="button" class="btno" value="÷" onclick="operationShow(this)"></td>
      </tr>
      <tr>
        <td align="center" ;><input type="button" class="btn" value="7" onclick="countSHow(this)"></td>
        <td align="center" ;><input type="button" class="btn" value="8" onclick="countSHow(this)"></td>
        <td align="center" ;><input type="button" class="btn" value="9" onclick="countSHow(this)"></td>
        <td align="center" class="func"><input type="button" class="btno" value="×" onclick="operationShow(this)"></td>
      </tr>
      <tr>
        <td align="center" ;><input type="button" class="btn" value="4" onclick="countSHow(this)"></td>
        <td align="center" ;><input type="button" class="btn" value="5" onclick="countSHow(this)"></td>
        <td align="center" ;><input type="button" class="btn" value="6" onclick="countSHow(this)"></td>
        <td align="center" class="func"><input type="button" class="btno" value="-" onclick="operationShow(this)"></td>
      </tr>
      <tr>
        <td align="center" ;><input type="button" class="btn" value="1" onclick="countSHow(this)"></td>
        <td align="center" ;><input type="button" class="btn" value="2" onclick="countSHow(this)"></td>
        <td align="center" ;><input type="button" class="btn" value="3" onclick="countSHow(this)"></td>
        <td align="center" class="func"><input type="button" class="btno" value="+" onclick="operationShow(this)"></td>
      </tr>
      <tr>
        <td align="center" colspan="2"><input type="button" class="btn0" value="0" onclick="countSHow(this)"></td>
        <td align="center" ;><input type="button" class="btn" value="." onclick="dot(this)"></td>
        <td align="center" class="func"><input type="button" class="btno" value="=" onclick="result(this)"></td>
      </tr>
    </table>
  </div><!-- calculator -->
  <!-- 计算器的js代码 -->
  <script src="js/calculator.js"></script>
</body>

</html>

css代码:calculator.css

* {
    margin: 0px;
}

input {
    width: 50px;
    height: 50px;
    border: 1px solid black;;
}

#calculator {
    display: block;
    width: 200px;
    height: 300px;
    position: relative;
    top: 250px;
    margin: auto;
}
/* td{
    border: 1px solid black;
} */
#display {
    width: 200px;
    /* border: 1px solid black; */
    background-color: #000000;
}

#note {
    width: 190px;
    height: 50px;
    background-color: #000000;
    color: white;
    font-size: 18px;
    text-align: right;
}

.btn {
    background-color: rgb(92, 88, 88);
    border-radius: 0px;
    border: 1px solid black;
}

.btn0 {
    width: 100px;
    background-color: rgb(92, 88, 88);
    border-radius: 0px;
    /* border: 1px solid black; */
}

.btno {
    border-radius: 0px;
    /* border: 1px solid black; */
    background-color: yellow;
}

js代码:calculator.js

/*
 * @Author: caesarding 
 * @Date: 2020-04-05 16:51:37 
 * @Last Modified by: dingtao
 * @Last Modified time: 2020-04-08 19:10:25
 */
/*
简易计算器--2.0：
    1.限制最小数和最大数的长度。
    2.实现添加小数点和去除小数点
    3.数字键能累积显示，结果可以累积运算（修复累加结果错误）
    4.初次运算，运算符后没有数字实行默认加0操作
    6.禁止用户使用非法违规操作
    7.可以切换运算符（修复连续重复使用功能键导致num1被清零的bug）
*/
num1 = 0; //保存第一值
num2 = 0; //保存第二值
op = ""; //保存运算符
opresult = 0; //保存结果，用于连续计算
// flag = false; //判断是否为得出结果后的再次运算  用aclear.value的值进行简化替代flag  太麻烦了  还是不变了
flag = false; //判断是否重新开始运算 true为允许计算
isprotect = false; //判断计算器是否处于保护状态
// 屏幕显示字符串
opScreen = document.getElementById("note");
aclear = document.getElementById("aclear");
//屏幕数字按钮功能
function countSHow(n) {
    //是否重新开始运算
    if (flag) {
        // alert("已经为您重新开始计算！正在清空所有储存器！");
        clearNote(AC); //清楚寄存器
        flag = false; //切换继续运算模式
    }
    // 输入长度限制
    if (opScreen.value.length > 12) {
        alert("对不起！太长啦！我记不住啦！😣😣😣");
        // opScreen.value = "0";
    } else {
        if (opScreen.value == "0") {
            // opScreen.value == "除数不为0" ||
            // opScreen.value == "超出运算范围" ||
            // opScreen.value == "非法输入" 等结果只允许AC操作
            opScreen.value = n.value; //清楚屏幕，获取第一个数字
            isprotect = false;
        } else {
            opScreen.value += n.value; //追加数字
        };
    }
    aclear.value = "C"; //改变ac到c
}
//点功能
function dot() {
    if (isprotect) {
        alert("你在干嘛啊？你怎么又欺负我呀？☹☹☹");
        opScreen.value = "非法输入";
    } else{
        var screenText = opScreen.value;
        if (screenText.indexOf(".") < 0) {
            opScreen.value += ".";
        }
        //实现重复按点取消点
        var i = screenText.length;
        if (screenText.substring(i-1)==".") {
            opScreen.value = screenText.substring(0,i-1);
        }
        {
            // opScreen.value -= ".";
            // alert("你又点我干嘛！😡😡😡");
        }
    }
}

//一按运算符，计算器顶部显示运算过程，并更新num1和运算符
function operationShow(o) {
    if (isprotect) {
        alert("你在干嘛啊？你怎么又欺负我呀？☹☹☹");
        opScreen.value = "非法输入";
    } else {
        if(opScreen.value!=0){//保护num1，防止多次输入运算符导致数据丢失
            num1 = parseFloat(opScreen.value);
            //通过flag可以保证，不输入时num1含有默认值0，而不是延用上次运算结果
        }
        flag = false;
        op = o.value;
        opScreen.value = "0";
    }
}

/*等于，计算并在显示屏输出结果*/
function result() {
    if (isprotect) {
        clearNote(AC);
    } else {
        if (flag) { //解决计算器不能连续运算问题
            num1 = parseFloat(opScreen.value);
        } else {
            num2 = parseFloat(opScreen.value); //计算num2的值
        }
        switch (op) {
            case "÷":
                opresult = divide(num1, num2);
                break;

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

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

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

            default:
                opresult = plus(num1, num2);
        }
        //输出结果
        flag = true; //允许重新运算
        aclear.value = "AC";
        if (opScreen.value.length > 10) {
            alert("对不起，太大了！我手指不够用啦😭😭😭");
            opresult = "超出运算范围";
            isprotect = true; //保护计算器并中断运算
        }
        opScreen.value = opresult;
        console.log("opScreen.value.length=", opScreen.value.length);
    }
}

/*加*/
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") {
        alert("求你不要开除我好不好😢😢😢");
        return "除数不能为0";
    } else {
        return x / y;
    }
}

/*百分号*/
function percent() {
    if (isprotect) {
        alert("你在干嘛啊？你怎么又欺负我呀？☹☹☹");
        opScreen.value = "非法输入";
    } else {
        opScreen.value = opScreen.value / 100;
    }
}

/*取负数*/
function negate() {
    if (isprotect) {
        alert("你在干嘛啊？你怎么又欺负我呀？☹☹☹");
        opScreen.value = "非法输入";
    } else {
        opScreen.value = -opScreen.value;
    }
}
/*重置*/
// 重要！
// clear是js的内置函数，如果clearNote命名为clear时，则会出现没有任和报错的错误！！
function clearNote(c) {
    if (c.value == "AC") {
        opScreen.value = "0";
        num1 = 0;
        num2 = 0;
        op = "";
        opresult = 0;
        flag = false;
        isprotect = false;
    } else {
        opScreen.value = "0";
    }
}

// function roundFun(value, n) {
//     return Math.round(value * Math.pow(10, n)) / Math.pow(10, n);
// }

/*
 * @Author: caesarding 
 * @Date: 2020-04-05 16:51:37 
 * @Last Modified by:   dingtao 
 * @Last Modified time: 2020-04-05 16:51:37 
 */
 /*
简易计算器--1.0：
*/
num1 = 0; //保存第一值
num2 = 0; //保存第二值
op = ""; //保存运算符
opresult = 0; //保存结果，用于连续计算
// flag = false; //判断是否为得出结果后的再次运算  用aclear.value的值进行简化替代flag  太麻烦了  还是不变了
flag = false;
// 屏幕显示字符串
opScreen = document.getElementById("note");
aclear = document.getElementById("aclear")
/*按数字的屏幕显示控制：如果屏幕显示是0，按n替换为n，显示不为0则追加字符 */
function countSHow(n) {
    //是否重新开始运算
    if (flag) {
        clearNote(aclear.value);
        flag = false;
    }
    // 字符串长度限制
    if (opScreen.value.length > 20) {
        alert("超过限制!请重新输入");
        opScreen.value = "0";
    } else {
        if (opScreen.value == "0" || opScreen.value == num1 || opScreen.value == "除数不为0") {
            opScreen.value = n.value;
        } else {
            opScreen.value += n.value;
        };
    }
    //改变ac到c
    aclear.value = "C";
}

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

//一按运算符，计算器顶部显示运算过程，并更新num1和运算符
function operationShow(o) {
    flag = false;
    num1 = parseFloat(opScreen.value);
    op = o.value;
    opScreen.value = "0";
}

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

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

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

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

        default:
            opresult = plus(num1, num2);
    }
    opScreen.value = opresult;
    flag = true; //判断是否继续运算
    aclear.value = "AC";
}

/*加*/
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 percent() {
    opScreen.value = opScreen.value / 100;
}

/*取负数*/
function negate() {
    opScreen.value = -opScreen.value;
}
/*重置*/
// 重要！
// clear是js的内置函数，如果clearNote命名为clear时，则会出现没有任和报错的错误！！
function clearNote(c) {
    if (c.value == "AC") {
        opScreen.value = "0";
        num1 = 0;
        num2 = 0;
        op = "";
        opresult = 0;
    } else {
        opScreen.value = "0";
    }
}

思考总结

关于html

<script src="../js/calculator.js"> </script> 的位置一定要放在最后，否则可能会出现的错误如下

Uncaught TypeError: Cannot read property ‘value’ of null

at countSHow (calculator.js:27)

at HTMLInputElement.onclick (main.php:42)

php/html+css+js制作计算器效果展示完整代码思考总结

问题出在JS运行的时候你的页面还没有加载完成，所以你的JS代码找不到你的页面元素，就会抛出这个问题。解决办法就是把JavaScript代码放在body的最后。

标签的align属性
标签的readonly属性
标签下面的colspan（跨列）和rowspan（跨行）属性

关于js

注意函数命名不要使用内置函数！例如：clear。否则则会出现没有任和报错的错误现象，即函数无法正常调用。ps：clear函数作用是清除指定文档的内容。

关于css

设置input内容的颜色
设置按钮样式

php/html+css+js制作计算器效果展示完整代码思考总结

目录

效果展示

完整代码

HTML/PHP代码:calculator.html

css代码:calculator.css

js代码:calculator.js

思考总结

关于html

关于js

关于css

继续阅读

用JS模拟实现二叉树(含遍历)

Compile workrave under windows &ndash; My exprience 在Windows上编译Workrave

门户通专访草根站长九天狼：做站贵在坚持

如何成为一名.net 工程师?

tabpanel 使用问题

为什么把CSS放头部，script放下面

关于 underscore 中模板引擎的应用示例

【JavaScript语法】函数对象的浅拷贝、深拷贝

CSS之折叠菜单

JS--运算符

数组和类数组

web开发之前后端渲染

DOM下元素 offset client scroll 相关属性简介

IE8 CSS设置DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

jquery_126_demo