JavaScript計算器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>計算器的實現</title>
    </head>
    <script type="text/javascript">
        function calCulate(val){
            
            var num = document.getElementById("t");
            switch(val){
                case "=":
                num.value = eval(num.value);
                
                break;
                
                case "C":
                num.value = "";
                break;
                
                default:
                  num.value =num.value+val;
                break;
            }
            
            
        }
    </script>
    
    <style type="text/css">
        #sDiv{
            text-align: center;
            border: solid 1px;
            width: 300px;
            border-radius: 10px;
            background-color: aqua;
        }
        #t{
            border:solid 1px ;
            width: 260px;
            border-radius: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            font-size: 20px;
        }
        input[type=button]{
            border-radius: 5px;
            width: 55px;
            height: 30px;
            margin: 2px;
            font-size: 20px;
        }
        #equ{
            width: 260px;
            font - size: 30px;
            margin-bottom: 10px;
        }
    </style>
    
    <body>
        <div id="sDiv">
 
        <input type="text" name="t" id="t" value="" /><br/>
        <input type="button" name="" id="" value="1" onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="2" onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="3" onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="4" onclick="calCulate(this.value)"/><br />
        <input type="button" name="" id="" value="5" onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="6" onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="7" onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="8" onclick="calCulate(this.value)"/><br />
        <input type="button" name="" id="" value="9" onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="0" onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="." onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="C" onclick="calCulate(this.value)"/><br/>
        <input type="button" name="" id="" value="+" onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="-" onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="*" onclick="calCulate(this.value)"/>
        <input type="button" name="" id="" value="/" onclick="calCulate(this.value)"/><br/>
        <input type="button" name="" id="equ" value="=" onclick="calCulate(this.value)"/>
        </div>
    </body>
</html>
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章