1. 程式人生 > >Javascript學習:綜合案例2--網頁計算器

Javascript學習:綜合案例2--網頁計算器

js自學網站推薦:http://www.51zxw.net/study.asp?vip=4857021

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            margin: 20px auto;
            border: 5px outset orange;
        }
        #tab_1,#tab_2,#tab_3{
            border: 3px outset rgba(15,10,10,0.3);
        }
        td{
            height: 30px;
            background:#ccc;
        }
        input{
            outline: none;
            box-shadow: 2px 2px 8px rgba(100,100,100,0.8) inset;
        }
        [type=button]{
            width:60px;
            height:40px;
            border-radius: 5px;
            background: #fff;
            box-shadow: 2px 2px 8px rgba(100,100,100,0.8) inset;
        }
        #txtnum{
            background: #fff;
            width:100%;
            height:44px;
            text-align: right;
            font-size:22px;
        }
        .btnbox{
            padding: 5px auto;
            text-align: center;
        }

    </style>
</head>
<body>

    <table cellspacing="0">
        <tr>
            <td colspan="2"><input type="text" id="txtnum" value="0"></td>
            <td class="btnbox">
                <input type="button" value="清除" onclick="txtnum.value='0';result=0">
                <input type="button" value="退格" onclick="backspace()">
            </td>
        </tr>
        <tr>
            <td>
                <table id="tab_1">
                    <tr>
                        <td><input type="button" value="sin" onclick="math('sin')"></td>
                        <td><input type="button" value="cos" onclick="math('cos')"></td>
                        <td><input type="button" value="tan" onclick="math('tan')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="asin" onclick="math('asin')"></td>
                        <td><input type="button" value="acos" onclick="math('acos')"></td>
                        <td><input type="button" value="atan" onclick="math('atan')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="PI" onclick="math('PI')"></td>
                        <td><input type="button" value="1/x" onclick="math('1/x')"></td>
                        <td><input type="button" value="exp" onclick="math('exp')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="lnx" onclick="math('lnx')"></td>
                        <td><input type="button" value="lgx" onclick="math('lgx')"></td>
                        <td><input type="button" value="n!" onclick="math('n!')"></td>
                    </tr>
                </table>
            </td>
            <td>
                <table id="tab_2">
                    <tr>
                        <td><input type="button" value="7" onclick="num(7)"></td>
                        <td><input type="button" value="8" onclick="num(8)"></td>
                        <td><input type="button" value="9" onclick="num(9)"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="4" onclick="num(4)"></td>
                        <td><input type="button" value="5" onclick="num(5)"></td>
                        <td><input type="button" value="6" onclick="num(6)"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="1" onclick="num(1)"></td>
                        <td><input type="button" value="2" onclick="num(2)"></td>
                        <td><input type="button" value="3" onclick="num(3)"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="0" onclick="num(0)"></td>
                        <td><input type="button" value="." onclick="decimal()"></td>
                        <td><input type="button" value="=" onclick="compute('=')"></td>
                    </tr>
                </table>
            </td>
            <td>
                <table id="tab_3">
                    <tr>
                        <td><input type="button" value="+" onclick="compute('+')"></td>
                        <td><input type="button" value="取整" onclick="math('int')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="-" onclick="compute('-')"></td>
                        <td><input type="button" value="取餘" onclick="compute('%')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="*" onclick="compute('*')"></td>
                        <td><input type="button" value="x^y" onclick="compute('x^y')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="/" onclick="compute('/')"></td>
                        <td><input type="button" value="+/-" onclick="plusMinus()"></td>
                    </tr>
                </table>

            </td>
        </tr>
        
    </table>


    <script>

        var Boo = false;
        var result = 0 ;

        var ope; //儲存計算符號的變數

        /*自定義通過Id來獲取元素的函式 */
        function $(id) {
            return document.getElementById(id);
        };

        /*輸入小數點*/
        function decimal() {
            var txt = $("txtnum");
            //判斷是否按下運算子號,若按下運算子,文字框清0;
            if(Boo){
                txt.value = "0." ;
            }else{
                //indexOf:檢索數值中是否已有小數點
                if(txt.value.indexOf(".")==-1){
                    txt.value += "." ;
                }
            }


        };

        /*顯示屏獲取按鍵數字 */
        function num(num) {
            var txt = $("txtnum");
            //判斷是否按下運算子號,若按下運算子,文字框清0;
            if(Boo){
                txt.value = num ;
                Boo=false;
            }else{
                //判斷初始數字是否為0
                if(txt.value=="0"){
                    txt.value = num ;
                }else{
                    txt.value += num ;
                }
            }
            Boo=false;
        }

        function compute(op) {
            var onum = $("txtnum").value;
            if(onum==" "){onum=0};
            Boo = true;

            switch(ope){
                case "+" :
                    result += parseFloat(onum);break;
                case "-" :
                    result -= parseFloat(onum);break;
                case "*" :
                    result *= parseFloat(onum);break;
                case "/" :
                    result /= parseFloat(onum);break;
                case "=" :
                    result = parseFloat(onum);break;
                case "%" :
                    result %= onum;break;
                case "x^y" :
                    result =Math.pow(result,onum);break;

                default:
                    result = parseFloat(onum);
            }

            $("txtnum").value = result;
            ope = op;
        }
        
        //正負鍵:取反
        function plusMinus(){
            var onum = $("txtnum").value;
            if(onum==""){
                alert("資料不能為空!");
            }else{
                $("txtnum").value *= -1;
            };
            
        }

        //退格鍵
        function backspace(){
            var txt = $("txtnum");
            txt.value = txt.value.substring(0,txt.value.length-1);
            if(txt.value==""){ txt.value=0; }
        }


        function math(op){
            var onum = $("txtnum").value;
            if(onum==""){alert("資料不能為空!");}
            Boo = true;
            with(Math){
                switch (op){
                    case "sin": result = sin(onum);break;
                    case "cos": result = cos(onum);break;
                    case "tan": result = tan(onum);break;
                    case "asin": result = asin(onum);break;
                    case "acos": result = acos(onum);break;
                    case "atan": result = atan(onum);break;

                    case "PI": result = PI;break;
                    case "1/x": result = 1/onum;break;
                    case "exp": result = exp(onum);break;
                    case "lnx": result = log(onum);break;
                    case "lgx": result = log(onum)/log(10);break;
                    case "i": result = floor(onum);break;
                    case "int" :result =round(onum);break;  //取整(四捨五入)

                    case "n!": result = jc(onum);break;  //求階乘

                    default: result = parseFloat(onum);

                };

                $("txtnum").value = result;

            };

        };

        //階乘計算
        function jc(a){
            if(a==1){
                return 1;
            }else{
                return jc(a-1)*a;
            }
        }

        /*
        * indexOf() 方法可返回某個指定的字串值在字串中首次出現的位置。
        * 如果要檢索的字串值沒有出現,則該方法返回 -1。
        *
        * substring() 方法用於提取字串中介於兩個指定下標之間的字元。
        *
        * with 語句用於設定程式碼在特定物件中的作用域。
        * 
        * */


    </script>

</body>
</html>