html计算器

最新推荐文章于 2024-05-10 11:30:24 发布

༺ཌ琦ད༻

最新推荐文章于 2024-05-10 11:30:24 发布

阅读量1.8k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43181967/article/details/99680625

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<html>
  <meta charset="utf-8">
  <head>
    <script>
      	function insert(num){
          document.form.textview.value=document.form.textview.value+num;
        }
        function equal(){
          var temp=document.form.textview.value;
          if(temp){
            document.form.textview.value=eval(temp);
          }
        }
        function clean(){
          document.form.textview.value="";
        }
        function back(){
          var temp=document.form.textview.value;
          document.form.textview.value=temp.substring(0,temp.length-1);
        }
    </script>
    <style>
      *{
        margin:0;
        padding:0;
      }
      .button{
        width:50;
        height:50;
        font-size:25;
        margin:2;
        cursor:pointer;
        background: #a29db370;
        border:none;
        color:white;
      }
      .textview{
        width:218;
        margin:5;
        font-size:25;
        padding:5;
        border:none;
      }
      .main{
        border:5px solid #43d6f5;
        padding:2;
        position:absolute;
        top:50%;
        left:50%;
        transform:translateX(-50%)translateY(-50%)
      }
      .bg{
        background:linear-gradient(to right,#4e4f8a,#963b35);
        height:100%;
      }
    </style>
  </head>

  <body>
    <div class="bg"></div>
    <div class="main">
      <form name="form">
        <input class="textview" name="textview">
      </form>
      <table>
        <tr>
          <td><input class="button" type="button" value="C" onclick="clean()"></td>
          <td><input class="button" type="button" value="<" onclick="back()"></td>
          <td><input class="button" type="button" value="÷" onclick="insert('/')"></td>
          <td><input class="button" type="button" value="x" onclick="insert('*')"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
          <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
          <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
          <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
          <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
          <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
          <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
          <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
          <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
          <td rowspan=5><input class="button" style="height:106" type="button" value="=" onclick="equal()"></td>
        </tr>
        <tr>
          <td colspan=2><input class="button" style="width:106" type="button" value="0" onclick="insert(0)"></td>
          <td><input class="button" type="button" value="." onclick="insert('.')"></td>
        </tr>
      </table>
    </div>
  </body>
</html>