网页版计算器

最新推荐文章于 2022-12-21 17:06:11 发布

传智博客

最新推荐文章于 2022-12-21 17:06:11 发布

阅读量3.4k

点赞数 7

文章标签： html

本文链接：https://blog.csdn.net/weixin_43693233/article/details/84401329

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 500px;
            margin:0 auto;
            margin-top: 100px;
            border-radius: 5px;
            background: rgba(0, 0, 0, 0.58);
            border: 3px solid rgba(0, 0, 0, 0.29);
        }
        .key{
            width: 370px;
            height: 350px;
            margin-left: 15px;
            margin-top: 10px;
            border-radius: 5px;
            border: 1px solid #000000;
        }
          table{
              margin-top: 20px;
              margin-left: 30px;
              border-spacing: 20px
          }
        table td{
            width: 50px;
            height: 40px;
            border: 1px solid rgb(0, 0, 0);
            border-radius: 5px;
            text-align: center;
        }
        table input{
            border-radius: 5px;
            width: 50px;
            height: 40px;
            outline: none;
        }
        .top{
            width: 370px;
            height: 50px;
            margin-left: 15px;
            margin-top: 10px;
            border-radius: 3px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="padding-left: 15px;margin-top: 10px;">
            <h2>ZY的计算器</h2>
        </div>
       <div>
           <input type="text"  id="content" disabled="disabled"class="top">
       </div>
        <div class="key">
              <table>
                  <tr>
                      <td><input type="button" value="CE" id="ce" onclick="appContent(this)"></td>
                      <td><input type="button" value="+" id="jia" onclick="appContent(this)"></td>
                      <td><input type="button" value="-" id="jian" onclick="appContent(this)"></td>
                      <td><input type="button" value="DEL" id="del" onclick="appContent(this)"></td>
                  </tr>
                  <tr>
                      <td><input type="button" value="7" id="num7"onclick="appContent(this)"></td>
                      <td><input type="button" value="8" id="num8"onclick="appContent(this)"></td>
                      <td><input type="button" value="9" id="num9"onclick="appContent(this)"></td>
                      <td><input type="button" value="*" id="xing"onclick="appContent(this)"></td>
                  </tr>
                  <tr>
                      <td><input type="button" value="4" id="num4"onclick="appContent(this)"></td>
                      <td><input type="button" value="5" id="num5"onclick="appContent(this)"></td>
                      <td><input type="button" value="6" id="num6"onclick="appContent(this)"></td>
                      <td><input type="button" value="/" id="chu"onclick="appContent(this)"></td>
                  </tr>
                  <tr>
                      <td><input type="button" value="1" id="num1"onclick="appContent(this)"></td>
                      <td><input type="button" value="2" id="num2"onclick="appContent(this)"></td>
                      <td><input type="button" value="3" id="num3"onclick="appContent(this)"></td>
                      <td><input type="button" value="." id="dian"onclick="appContent(this)"></td>
                  </tr>
                  <tr>
                      <td><input type="button" value="(" id="zuo"onclick="appContent(this)"></td>
                      <td><input type="button" value="0" id="num0"onclick="appContent(this)"></td>
                      <td><input type="button" value=")" id="you"onclick="appContent(this)"></td>
                      <td><input type="button" value="=" id="deng"onclick="appContent(this)"></td>
                  </tr>
              </table>
        </div>
    </div>
<script type="text/javascript">
    function appContent(self){
        var content=document.getElementById('content');
        if(self.value!="CE"&&self.value!="DEL"&&self.value!="="){
            content.value+=self.value;
        }else if(self.value=="CE"){
            //清空
            content.value="";
        }
        else if (self.value=="DEL") {
            //删除：截取除最后一个字符串 substring
            content.value=content.value.substring(0,content.value.length-1);
        }else if(self.value=="=") {
            //判等
            var resultText = calculate(content.value);
            content.value = content.value + "=" + resultText;
        }
   }
        function calculate(content) {
            var index = content.lastIndexOf("(");
            if (index > -1) {
                var endIndex = content.indexOf(")", index);
                if (endIndex > -1) {
                    var result = calculate(content.substring(index + 1, endIndex));
                    return calculate(content.substring(0, index) + ("" + result) + content.substring(endIndex + 1))
                }
            }
            index = content.indexOf("+");
            if (index > -1) {
                return calculate(content.substring(0, index)) + calculate(content.substring(index + 1));
            }
            index = content.lastIndexOf("-");
            if (index > -1) {
                return calculate(content.substring(0, index)) - calculate(content.substring(index + 1));
            }
            index = content.lastIndexOf("*");
            if (index > -1) {
                return calculate(content.substring(0, index)) * calculate(content.substring(index + 1));
            }
            index = content.lastIndexOf("/");
            if (index > -1) {
                return calculate(content.substring(0, index)) / calculate(content.substring(index + 1));
            }
            if ("" == content) {
                return 0;
            } else {
                return content - 1 + 1;
            }
        }

</script>
</body>
</html>