JavaScript應用：試著用JavaScript做出計算機（一）-第十二天

第 12 屆 iThome 鐵人賽

DAY 12

自我挑戰組

Html/Css3/Javascript從0開始自學系列第 12 篇

12th鐵人賽

sss86925

2020-09-12 22:17:24

4817 瀏覽

分享至

這次主要參考的書（或文章影片）是：「JavaScript資料結構及演算法實作 Loiane Groner著」/youtuber：彭彭的課程之JavaScript網頁前端工程入門

前言：之所以想做計算機是因為我想做的旅遊網站我希望可以幫忙使用者做預算控制，因此想做一個計算機來套進網頁中。

開始之前，先更正一下昨天的程式碼
其實我還沒找到錯誤在哪，不知道為什麼無法成功讓運算結果顯示出來
但我改了另外一個方法便成功了
同時也加了減法/乘法/除法的運算
其實幾乎都是複製貼上而已啦ＸD

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>javascript函數練習</title>
    </head>
    <script>
        function hello(){
            alert("hello world");
        }
        //hello();

        function add(){
            var numberFir = parseInt(document.getElementById('numFirst').value);
            var numberSec = parseInt(document.getElementById('numSecond').value);
            var total = numberFir+numberSec;
            document.getElementById('totalid').textContent = total;
        }

        function mulit(){
            var numberFir = parseInt(document.getElementById('numFirst').value);
            var numberSec = parseInt(document.getElementById('numSecond').value);
            var total = numberFir*numberSec;
            document.getElementById('mulitId').textContent = total;
        }

        function qu(){
            var numberFir = parseInt(document.getElementById('numFirst').value);
            var numberSec = parseInt(document.getElementById('numSecond').value);
            var total = numberFir/numberSec;
            document.getElementById('quId').textContent = total;
        }

        function sub(){
            var numberFir = parseInt(document.getElementById('numFirst').value);
            var numberSec = parseInt(document.getElementById('numSecond').value);
            var total = numberFir-numberSec;
            document.getElementById('subId').textContent = total;
        }
    
    </script>
    <body>
        <p>請輸入數字1<input type="text" id='numFirst'>
        請輸入數字2<input type="text" id='numSecond'></p>
        <p><button onclick="add()">求和</button>=<em id='totalid'></em></p>

        <p><button onclick="mulit()">求乘</button>＝<em id='mulitId'></em></p>

        <p><button onclick="qu()">求商</button>＝<em id="quId"></em></p>

        <p><button onclick="sub()">求差</button>=<em id="subId"></em></p>
    
    </body>
</html>

成功後應該顯示如下

接下來看看計算機的程式碼吧！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>計算機練習</title>
        <script>
            function start(){
                var btnget = document.getElementsByClassName("btn");
                var btnOnWindow = document.getElementsByClassName("window")[0];
                var btnDelAc = document.getElementsByClassName("btnDelAc");
                var wayres = [];

                for(var i = 0; i <btnDelAc.length; i++){
                    btnDelAc[i].onclick = function(){
                        if(this.value == "AC"){
                            wayres = [];
                            btnOnWindow.value = "";
                        }
                        else{
                            btnOnWindow.value = btnOnWindow.value.substr(0, btnOnWindow.value.length - 1);
                        }
                    }
                }
                for(var i=0; i < btnOnWindow.length; i++){
                    btnOnWindow[i].onclick = function(){
                        if(btnOnWindow.value =="" && this.value =="."){
                            btnOnWindow.value = "0.";
                        }
                        else{
                            if(!isNaN(this.value)||this.value == "."){
                                if(btnOnWindow.value.indexOf(".")!= -1){
                                    if(this.value!="."){
                                        btnOnWindow.value += this.value;
                                    }
                                }
                                else{
                                    btnOnWindow.value += this.value;
                                }
                            }
                            else{
                                if(this.value!="="){
                                    wayres[wayres.length]=btnOnWindow.value;
                                    wayres[wayres.length]=this.value;
                                    btnOnWindow.value = "";
                                }
                                else{
                                    wayres[wayres.length] = btnOnWindow.value;
                                    btnOnWindow.value = eval(wayres.join(""));
                                    wayres=[];
                                }
                            }
                        }
                    }
                }
            }
        </script>
        <style type="text/css">
            table{
                border-collapse: collapse;
                margin: auto;
            }
            td{
                width:150px;
                border:1px solid black;
            }

            .btn{
                width:150px;
                font-size: x-large;
            }

            .btnClick{
                width:300px;
                font-size: x-large;
            }

            .window{
                width:600px;
                font-size: x-large;
                text-align: right;
            }

            .btnZero{
                width:300px;
                font-size: x-large;
            }

        </style>
    </head>
    <body onload = "start();">
        <table>
            <tr>
               <td colspan="4"><input class="window" type='text' disabled/></td> 
            </tr>
            <tr>
                <td colspan="2"><input class="btnClick" type='button' value="AC"/></td>
                <td colspan="2"><input class="btnClick" type='button' value="Del"/></td>
            </tr>
            <tr>
                <td><input class="btn" type="button" value="7"/></td>
                <td><input class="btn" type="button" value="8"/></td>
                <td><input class="btn" type="button" value="9"/></td>
                <td><input class="btn" type="button" value="+"/></td>
            </tr>
            <tr>
                <td><input class="btn" type="button" value="4"/></td>
                <td><input class="btn" type="button" value="5"/></td>
                <td><input class="btn" type="button" value="6"/></td>
                <td><input class="btn" type="button" value="-"/></td>
            </tr>
            <tr>
                <td><input class="btn" type="button" value="1"/></td>
                <td><input class="btn" type="button" value="2"/></td>
                <td><input class="btn" type="button" value="3"/></td>
                <td><input class="btn" type="button" value="*"/></td>
            </tr>
            <tr>
                <td colspan="2"><input class="btnZero" type="button" value="0"/></td>
                <td><input class="btn" type="button" value="="/></td>
                <td><input class="btn" type="button" value="/"/></td>
            </tr>
        </table>
    </body>
</html>

這次程式碼包含了之前學過的css/html和現在的java
不過尷尬的是這次一樣還無法成功運行
所以就先不解釋寫了什麼
希望明天也能找出答案ＱＱ