html实现计算器功能代码下载

涛哥
Html代码

我为你提供一个简单的HTML计算器代码示例，你可以在自己的电脑上创建一个HTML文件，将代码复制到文件中，然后在浏览器中打开该文件，即可在浏览器中使用计算器功能。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>计算器</title>
  <style>
    /* 样式表 */
    .calculator {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .calculator button {
      font-size: 24px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.2s ease-in-out;
    }

    .calculator button:hover {
      background-color: #eee;
    }

    .calculator button:active {
      background-color: #ccc;
    }

    .calculator button.clear {
      background-color: #f44336;
      color: #fff;
      border-color: #f44336;
    }

    .calculator button.clear:hover {
      background-color: #e53935;
      border-color: #e53935;
    }

    .calculator button.clear:active {
      background-color: #c62828;
      border-color: #c62828;
    }

    .calculator button.equal {
      background-color: #4caf50;
      color: #fff;
      border-color: #4caf50;
      grid-row: 5 / 6;
      grid-column: 3 / 5;
    }

    .calculator button.equal:hover {
      background-color: #388e3c;
      border-color: #388e3c;
    }

    .calculator button.equal:active {
      background-color: #1b5e20;
      border-color: #1b5e20;
    }

    .calculator input {
      font-size: 24px;
      padding: 10px;
      text-align: right;
      border: none;
      border-radius: 5px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    }
  </style>
</head>
<body>
  <div class="calculator">
    <input type="text" id="result" readonly>
    <button onclick="appendValue('7')">7</button>
    <button onclick="appendValue('8')">8</button>
    <button onclick="appendValue('9')">9</button>
    <button onclick="appendValue('/')">/</button>
    <button onclick="appendValue('4')">4</button>
    <button onclick="appendValue('5')">5</button>
    <button onclick="appendValue('6')">6</button>
    <button onclick="appendValue('*')">*</button>
    <button onclick="appendValue('1')">1</button>
    <button onclick="appendValue('2')">2</button>
    <button onclick="appendValue('3')">3</button>
<button onclick="appendValue('-')">-</button>
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendValue('+')">+</button>
<button onclick="clearResult()" class="clear">C</button>
 </div>
<script>
function appendValue(value) {
document.getElementById('result').value += value;
}
function calculate() {
  var result = eval(document.getElementById('result').value);
  document.getElementById('result').value = result;
}

function clearResult() {
  document.getElementById('result').value = '';
}

这个html实现计算器功能代码示例中包含了一个简单的HTML计算器，它由一个包含数字、操作符和清空按钮的网格布局组成。按下数字或操作符的按钮时，将向输入框中附加该值，按下等于号按钮时，将执行计算，并将结果显示在输入框中。按下清空按钮时，将清空输入框的值。

请注意，这只是一个基本的html实现计算器功能示例代码，不包含错误处理或防范攻击的安全性能。在实际应用程序中，应考虑到这些问题并采取适当的预防措施。

 
  • 计算器
  • 多功能计算器