网页版的计算器

最新推荐文章于 2022-01-21 20:06:03 发布

霉霉的第四只猫

最新推荐文章于 2022-01-21 20:06:03 发布

阅读量160

点赞数

分类专栏： HTML5 文章标签： js html

本文链接：https://blog.csdn.net/weixin_43769732/article/details/118346381

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
    <meta charset="UTF-8">
    <title>My Calculator</title>
 <style type="text/css">
     body{
      background-repeat: no-repeat;
      background-position: center 3px;
    }
   .main{

      background-color: #d6fae3;
     text-align: center;
     border: papayawhip dashed 8px;
      margin: 0 auto;
      width: 700px;
      height: 970px;


    }
   .title{
     color: #b3d4fc;
      text-align: center;
      font-family: 华文彩云;
     font-size: 80px;
      margin: 0 auto;
      width: 700px;
      height: 100px;
   }

    .displayResult{
      text-align: center;

      margin: 0 auto;
      width: 700px;
      height: 200px;

    }
    #result{
      background-color: white;
      text-align:right;
      border: 1px solid black;
      font-weight: bolder;
       width: 700px;
      height: 190px;
    }
.key{
      margin: 0 auto;
      width: 700px;
      height: 670px;

}
    .tab{
      text-align: center;
      padding: 10px;
      width: 700px;
      height: 650px;

    }
    button{
      border-radius: 8px;
      font-size: 21px;
      width: 150px;
      height: 90px;
      background-color: #feff8a;
    }
.getResult{
      border-radius: 8px;
      font-size: 21px;
      width: 650px;
      height: 90px;
      background-color: #feff8a;
    }
#res{
  color: #6399ff;
  font-size: 48px;

}
#exp{
  color: black;
  font-size: 27px;
}



 </style>
  <script type="text/javascript">
    var arr=[];/*用一个数组保存要计算结果的字符串*/
       var reg=/,/g;  /*正则表达式用来全局搜索数组里面的逗号*/
        var s=0;   /*接收返回计算结果的字符串*/
    function  getKeys(key) {

          arr.push(key);
                     /*key传入的是什么，数组就添加什么字符*/
           var str= arr.toString().replace(reg,"");/*将字符串里面所有的逗号清空*/
         document.getElementById("exp").innerText=str+"";/*将表达式输出在文本域内并显示*/
              s=str;
         return s;
    }
        function getResult() {
         var rs= eval(s);    //eval()方法计算字符串的值
         document.getElementById("res").innerText=rs+"";
         arr=[];  /*计算完结果清空保存要计算结果的字符串*/
    }
    function removeAll() {
            /*清除显示的所有内容*/
            /*把存储键入字符串清空*/ /*清空input框里面所有内容*/
            document.getElementById("exp").innerText="";
              document.getElementById("res").innerText="";
               arr=[];
    }

  </script>
</head>
<body>
<div class="main">
  <div class="title">My Calculator
  </div>
  <div class="displayResult">
  <table id="result">
     <tr><td id="exp"></td></tr>
        <tr><td id="res"></td></tr>
  </table>
</div>
<div class="key">
  <table class="tab">
    <tr>
      <td><button  onclick="getKeys(7)">7</button></td>
       <td><button  onclick="getKeys(8)">8</button></td>
       <td><button onclick="getKeys(9)">9</button></td>
       <td><button  onclick="getKeys('+')">+</button></td>
    </tr>
   <tr>
      <td><button  onclick="getKeys(4)">4</button></td>
       <td><button onclick="getKeys(5)">5</button></td>
       <td><button  onclick="getKeys(6)">6</button></td>
       <td><button   onclick="getKeys('-')">-</button></td>
    </tr>
    <tr>
      <td><button  onclick="getKeys(1)">1</button></td>
       <td><button  onclick="getKeys(2)">2</button></td>
       <td><button onclick="getKeys(3)">3</button></td>
       <td><button onclick="getKeys('*')">*</button></td>
    </tr>
    <tr>
      <td><button onclick="getKeys(0)">0</button></td>
       <td><button onclick="getKeys('.')">.</button></td>
       <td><button onclick="removeAll()">AC</button></td>
       <td><button  onclick="getKeys('/')">/</button></td>
    </tr>
    <tr><td colspan="4"><button class="getResult" onclick="getResult()">=</button></td></tr>
  </table>
</div>
</div>
</body>
</html>

霉霉的第四只猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页版的计算器

<!DOCTYPE html><html lang="en"><head><script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script> <meta charset="UTF-8"> <title>My Calculator</title> <style type="text/css"> .
复制链接

扫一扫

专栏目录