简易的 iPhone 计算器-JS、CSS、HTML

HTML+CSS 布局

 如下图：

1. 最外层使用div然后margin:auto;水平居中
2. 显示用户框我用的也是一个div 属性：text-align:right;文本右对齐
3. table表格：5行4列 加上 border-radius圆角属性
   

 
    
    
"panel">
        
"show">
        "0" cellspacing=8>
            

                
"del()">del
                
"c()">C
                
"number(this)">%
                
"number(this)">/
            
            

                
"number(this)">7
                
"number(this)">8
                
"number(this)">9
                
"number(this)">*
            
            

                
"number(this)">4
                
"number(this)">5
                
"number(this)">6
                
"number(this)">-
            
            

                
"number(this)">1
                
"number(this)">2
                
"number(this)">3
                
"number(this)">+
            
            

                
"2" οnclick="number(this)">0
                
"number(this)">.
                
"calculate()">=
            
        
    

JS 代码

由于JS代码没有多少且有注释，这里就不详细介绍了。

<script>
        // 获取显示框
        var show = document.getElementById('show');

        // 获取用户输入的数字，并显示
        function number(a) {
            show.innerText += a.innerText;
        }

        // 运算函数
        // 思路：1.判断显示框是否为空
        //      2.使用 eval(); 输出用户输入的算数
        function calculate() {
            show.innerText = show.innerText == "" ? "" : eval(show.innerText);
        }

        // 删除全部 del 函数
        function del() {
            show.innerText = "";
        }
        // 删除最后一位
        function c() {
            show.innerText = show.innerText.slice(0, show.innerText.length - 1);
        }
    </script>