效果展示

可以實作的計算功能包含：

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