在线网页计算器 - 免费使用简单计算器 - 常规

<!DOCTYPE html>
<html>
  <head>
    <title>在线网页计算器 - 免费使用简单计算器</title>
    <style>
      body {
        background-color: #f2f2f2;
        font-family: Arial, sans-serif;
      }
<pre><code>  .container {
    width: 300px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .calculator {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }

  .button {
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    color: #333;
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  }

  .button:hover {
    background-color: #e6e6e6;
  }

  .input {
    border: none;
    background-color: #f2f2f2;
    color: #333;
    font-size: 16px;
    padding: 10px;
    text-align: right;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  }
&lt;/style&gt;
</code></pre>
  </head>
  <body>
    <div class='container'>
      <h2>在线网页计算器</h2>
      <form name='calculator'>
        <input type='text' name='result' class='input' readonly />
        <div class='calculator'>
          <input type='button' value='1' class='button' onclick='calculator.result.value += '1'' />
          <input type='button' value='2' class='button' onclick='calculator.result.value += '2'' />
          <input type='button' value='3' class='button' onclick='calculator.result.value += '3'' />
          <input type='button' value='/' class='button' onclick='calculator.result.value += '/'' />
          <input type='button' value='4' class='button' onclick='calculator.result.value += '4'' />
          <input type='button' value='5' class='button' onclick='calculator.result.value += '5'' />
          <input type='button' value='6' class='button' onclick='calculator.result.value += '6'' />
          <input type='button' value='*' class='button' onclick='calculator.result.value += '*'' />
          <input type='button' value='7' class='button' onclick='calculator.result.value += '7'' />
          <input type='button' value='8' class='button' onclick='calculator.result.value += '8'' />
          <input type='button' value='9' class='button' onclick='calculator.result.value += '9'' />
          <input type='button' value='-' class='button' onclick='calculator.result.value += '-'' />
          <input type='button' value='.' class='button' onclick='calculator.result.value += '.'' />
          <input type='button' value='0' class='button' onclick='calculator.result.value += '0'' />
          <input type='button' value='=' class='button' onclick='calculator.result.value = eval(calculator.result.value)' />
          <input type='button' value='+' class='button' onclick='calculator.result.value += '+'' />
          <input type='reset' value='清除' class='button' />
        </div>
      </form>
    </div>
  </body>
</html>