小型计算器html+js代码

最新推荐文章于 2025-07-25 15:13:04 发布

nzstjhk

最新推荐文章于 2025-07-25 15:13:04 发布

阅读量2k

点赞数 3

分类专栏：小功能总结文章标签：计算器加减乘除 js

小功能总结专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个简单的网页版计算器实现方案，该计算器使用HTML进行布局设计，通过JavaScript实现了基本的数学运算功能，包括加减乘除及括号内的优先计算。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算器功能</title>
</head>
<style>
   table{
    border:1px solid #ccc;
    border-radius: 3%;
    padding:5px;
}
table tr td{
    width:20px;
    height:20px;
    padding:5px;
    text-align: center;
    line-height:20px;
    border: 1px solid #f9f9f9;
    box-shadow: 0 0 3px rgba(0,0,0,0.9);
}
</style>
<body>
    <table align="center">  
        <tr>  
            <td class="td_orange" colspan="5" id="content"></td>  
        </tr>  
        <tr>  
            <td class="td_orange" colspan="5" id="result"></td>  
        </tr>  
        <tr>  
            <td onclick="appContent(this)">1</td>  
            <td onclick="appContent(this)">2</td>  
            <td onclick="appContent(this)">3</td>  
            <td onclick="appContent(this)">*</td>  
            <td onclick="appContent(this)">/</td>  
        </tr>  
        <tr>  
            <td onclick="appContent(this)">4</td>  
            <td onclick="appContent(this)">5</td>  
            <td onclick="appContent(this)">6</td>  
            <td onclick="appContent(this)">+</td>  
            <td onclick="appContent(this)">-</td>  
        </tr>  
        <tr>  
            <td onclick="appContent(this)">7</td>  
            <td onclick="appContent(this)">8</td>  
            <td onclick="appContent(this)">9</td>  
            <td onclick="appContent(this)">(</td>  
            <td onclick="appContent(this)">)</td>  
        </tr>  
        <tr>  
            <td class="td_orange" onclick="appContent(this)">c</td>  
            <td onclick="appContent(this)">0</td>  
            <td onclick="appContent(this)">.</td>  
            <td onclick="appContent(this)">del</td>  
            <td class="td_orange" onclick="appContent(this)">=</td>  
        </tr>  
    </table>  
    <script>
    function appContent(td){  
        //找到显示字符串等式的td标签  
        var content = document.getElementById("content");  
        //找到显示结果的td标签  
        var result = document.getElementById("result");  
        //获取字符串的等式  
        var text = td.innerText; 
        //如果是删除键  
       if("del" == text){  
            if(content.innerText.length > 0){  
                //删除最后一个字符  
                content.innerText = content.innerText.substring(0,content.innerText.length-1);  
            }  
            //如果是全部删除  
           }else if("c" == text){  
                content.innerText = "";  
            //如果是按了等于号  
            }else if("=" == text){  
                var resultText = parse(content.innerText);  
                result.innerText = content.innerText + "=" + resultText;  
                content.innerText = "";  
            //除了上面三种情况,其他的都是尾加  
            }else{  
                content.innerText = content.innerText + text;  
            }    
    }  

/**解析字符串的等式为一个正确的结果*/  
function parse(content){  
    //寻找最后一个左括号  
    var index = content.lastIndexOf("(");  
    //如果等式中有左括号  
    if(index > -1){  
        //寻找右括号,从左括号的位置开始寻找  
        var endIndex = content.indexOf(")",index);  
  
        //如果等式中有右括号  
        if(endIndex > -1){  
            //调用自己算出括号中的结果  
            var result = parse(content.substring(index + 1,endIndex));  
            //然后继续调用自己,  
            //其实这里完成的工作就是"2+3+(2+3*2)"转化成了"2+3+8",也就是用括号中的结果替换括号所在位置  
            return parse(content.substring(0,index) + ("" + result) + content.substring(endIndex + 1))   
        }  
    }  
  
    index = content.indexOf("+");  
          
    if(index > -1){  
        return parse(content.substring(0,index)) + parse(content.substring(index + 1));  
    }  
  
    index = content.lastIndexOf("-");  
  
    if(index > -1){  
        return parse(content.substring(0,index)) - parse(content.substring(index + 1));  
    }  
  
    index = content.lastIndexOf("*");  
  
    if(index > -1){  
        return parse(content.substring(0,index)) * parse(content.substring(index + 1));  
    }  
  
    index = content.lastIndexOf("/");  
  
    if(index > -1){  
        return parse(content.substring(0,index)) / parse(content.substring(index + 1));  
    }  
          
    if("" == content){   
        return 0;  
    }else{  
        return content - 1 + 1; 
    }  
} 
    </script>
</body>
</html>

效果