天天看點

javascript深入學習-DOM取參綁定事件-按鈕電腦

在入門架構之前深入學習Javascript,鞏固一下前面學過的知識,利用html,css,js做了一個簡易的電腦。主要為鞏固前端基礎和熟悉dom取參和dom的事件綁定。

功能簡單,但是對我自己鞏固基礎有幫助,看到的大牛們不要嫌棄小弟水準,也歡迎您給點寶貴意見。

domCulculater下有js檔案夾和stylesheet檔案夾和domCulculater.html。js檔案夾下有domCulculater.js,用以存放javascript.stylesheet檔案夾下有domCulculater.css,用以存放CSS.

随筆:1.思路-》基本功能-》完善-》美化

          2.提取js做單獨檔案

          3.相同點選事件綁定多個元素,僅一個相應,盡量避免,師兄說用jquey可以解決,好期待,加油學習吧

javascript深入學習-DOM取參綁定事件-按鈕電腦

          4盡量減少重複性代碼,變量名與函數名也不要沖突

一.domCulculater.html

   <html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>culculater</title>

    <link rel="stylesheet" type="text/css" href="./stylesheet/DomCulculater.css" target="_blank" rel="external nofollow" >

</head>

<body>

    <p id="tips">tips:</p>

    <p id="tips">1本程式加減乘除運算正常輸入,再按=即可。</p>

    <p id="tips">2三角函數計算為綠色通道,先按數字,再按下三角函數方法即可得到結果。</p>

    <p id="tips">3預設三角函數為角度計算:輸入30,按sin即得0.5</p>

    <table width="226" id="table" class="tableBorder">

        <tr>

            <td colspan="5">

                <div align="center">

                    <input name="" type="text" id="numDisplay" />

                </div>

            </td>

        </tr>

        <tr>

            <td width="42" οnclick="onclicknum(1)" bgcolor="#FFFF77">

                <div align="center">

                    <input type="button" value="1">

                </div>

            </td>

            <td width="49" οnclick="onclicknum(2)" bgcolor="#FFFF77">

                <div align="center">

                    <input type="button" value="2">

                </div>

            </td>

            <td width="45" οnclick="onclicknum(3)" bgcolor="#FFFF77">

                <div align="center">

                    <input type="button" value="3">

                </div>

            </td>

            <td width="28" id="runway" οnclick="onclicknum('+')">

                <div align="center">

                    <input type="button" value="+">

                </div>

            </td>

            <td width="28" id="runway" οnclick="onclicknum('*')">

                <div align="center">

                    <input type="button" value="*">

                </div>

            </td>

        </tr>

        <tr>

            <td height="33" οnclick="onclicknum(4)" bgcolor="#FFFF77">

                <div align="center">

                    <input type="button" value="4">

                </div>

            </td>

            <td οnclick="onclicknum(5)" bgcolor="#FFFF77">

                <div align="center">

                    <input type="button" value="5">

                </div>

            </td>

            <td οnclick="onclicknum(6)" bgcolor="#FFFF77">

                <div align="center">

                    <input type="button" value="6">

                </div>

            </td>

            <td id="runway" οnclick="onclicknum('-')">

                <div align="center">

                    <input type="button" value="-">

                </div>

            </td>

            <td id="runway" οnclick="onclicknum('/')">

                <div align="center">

                    <input type="button" value="/">

                </div>

            </td>

        </tr>

        <tr>

            <td οnclick="onclicknum(7)" bgcolor="#FFFF77">

                <div align="center">

                    <input type="button" value="7">

                </div>

            </td>

            <td οnclick="onclicknum(8)" bgcolor="#FFFF77">

                <div align="center">

                    <input type="button" value="8">

                </div>

            </td>

            <td οnclick="onclicknum(9)" bgcolor="#FFFF77">

                <div align="center">

                    <input type="button" value="9">

                </div>

            </td>

            <td οnclick="triangle('sin')" id="triangle">

                <div align="center">

                    <input type="button" value="sin" id="triangle">

                </div>

            </td>

            <td οnclick="triangle('cos')" id="triangle">

                <div align="center">

                    <input type="button" value="cos" id="triangle">

                </div>

            </td>

        </tr>

        <tr>

            <td οnclick="onclicknum(0)" bgcolor="#FFFF77">

                <div align="center">

                    <input type="button" value="0">

                </div>

            </td>

            <td οnclick="onclickclear()">

                <div align="center">

                    <input type="button" value="clear" id="clear">

                </div>

            </td>

            <td οnclick="onclicknum('.')" bgcolor="#FFFF77">

                <div align="center">

                    <input type="button" value=".">

                </div>

            </td>

            <td οnclick="triangle('tan')">

                <div align="center">

                    <input type="button" value="tan" id="triangle">

                </div>

            </td>

            <td id="equal" οnclick="getResult()">

                <div align="center">

                    <input type="button" value="=">

                </div>

            </td>

        </tr>

    </table>

    <p>&nbsp;</p>

    <script language="javascript" type="text/javascript" src="./js/DomCulculater.js"></script>

</body>

</html>

二.domCulculater.js

var str, result;

var flag = 0;

function onclicknum(nums) {

    if (flag == 0) {

        str = document.getElementById("numDisplay");

        str.value = str.value + nums;

    } else {

        if (nums == '+' || nums == '-' || nums == '*' || nums == '/') {

            str = document.getElementById("numDisplay");

            str.value = str.value + nums;

            flag = 0;

        } else {

            onclickclear();

            flag = 0;

            onclicknum(nums);

        }

    }

}

//點選clear的事件

function onclickclear() {

    str = document.getElementById("numDisplay");

    str.value = "";

}

//點選=時的綁定事件

function getResult() {

    str = document.getElementById("numDisplay");

    result = eval(str.value);

    if (result == Infinity) {

        alert("除數不能為零");

        str.value = "";

    } else {

        str.value = result;

    }

    flag = 1;

}

//點選sin/cos/tan的綁定事件

function triangle(ways) {

    if (flag == 0) {

        var a;

        switch (ways) {

            case 'sin':

                str = document.getElementById("numDisplay");

                a = Math.sin(str.value / 180 * Math.PI);

                str.value = ways + str.value + "=" + a;

                flag = 1;

                break;

            case 'cos':

                str = document.getElementById("numDisplay");

                a = Math.cos(str.value / 180 * Math.PI);

                str.value = ways + str.value + "=" + a;

                flag = 1;

                break;

            case 'tan':

                str = document.getElementById("numDisplay");

                a = Math.tan(str.value / 180 * Math.PI);

                str.value = ways + str.value + "=" + a;

                flag = 1;

                break;

        }

    }

}

二.domCulculater.css

table {

    border-collapse: collapse;

}

.tableBorder {

    border: 3px solid #99FF33;

}

#triangle {

    color: 00EE00;

}

#numDisplay {

    font-family: "楷體";

    font-size: 20px;

}

#clear {

    color: EE0000;

}

#tips {

    font-family: "華文行楷";

    font-size: 20px;

}

#num {

    background-color: FFFF77;

}

div {

    color: EE0000;

}

table td:hover {

    background-color: #00FFFF;

}

繼續閱讀