js编程计算器代码是什么 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

JavaScript编程计算器代码可以根据具体需求有所不同，但是下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript计算器</title>
  <style>
    .calculator {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .calculator input {
      grid-column: span 4;
      padding: 10px;
    }
    .calculator button {
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <input type="text" id="result" readonly>
    <button onclick="clearResult()">C</button>
    <button onclick="appendNumber(7)">7</button>
    <button onclick="appendNumber(8)">8</button>
    <button onclick="appendNumber(9)">9</button>
    <button onclick="appendOperator('+')">+</button>
    <button onclick="appendNumber(4)">4</button>
    <button onclick="appendNumber(5)">5</button>
    <button onclick="appendNumber(6)">6</button>
    <button onclick="appendOperator('-')">-</button>
    <button onclick="appendNumber(1)">1</button>
    <button onclick="appendNumber(2)">2</button>
    <button onclick="appendNumber(3)">3</button>
    <button onclick="appendOperator('*')">*</button>
    <button onclick="appendNumber(0)">0</button>
    <button onclick="calculateResult()">=</button>
    <button onclick="appendOperator('/')">/</button>
  </div>

  <script>
    let result = document.getElementById('result');
    let currentNumber = '';
    let operator = '';
    let previousNumber = '';

    function appendNumber(number) {
      currentNumber += number;
      result.value = currentNumber;
    }

    function appendOperator(op) {
      operator = op;
      previousNumber = currentNumber;
      currentNumber = '';
    }

    function calculateResult() {
      let num1 = parseFloat(previousNumber);
      let num2 = parseFloat(currentNumber);
      let resultValue;

      switch(operator) {
        case '+':
          resultValue = num1 + num2;
          break;
        case '-':
          resultValue = num1 - num2;
          break;
        case '*':
          resultValue = num1 * num2;
          break;
        case '/':
          resultValue = num1 / num2;
          break;
        default:
          break;
      }

      result.value = resultValue;
      currentNumber = resultValue.toString();
    }

    function clearResult() {
      result.value = '';
      currentNumber = '';
      operator = '';
      previousNumber = '';
    }
  </script>
</body>
</html>

这段代码实现了一个简单的四则运算的计算器。用户可以通过按钮输入数字和运算符，计算器会实时显示输入的结果。代码中使用了JavaScript来处理用户的输入和计算结果。用户可以通过点击不同的按钮来输入数字和运算符，然后通过点击“=”按钮来计算结果并显示在输入框中。

1年前 0条评论

worktile

Worktile官方账号

JavaScript编程语言可以用来编写一个计算器。下面是一个基本的计算器代码示例：

<!DOCTYPE html>
<html>
<head>
<title>JavaScript计算器</title>
</head>
<body>
<input type="text" id="display" readonly>
<br>
<button onclick="clearDisplay()">C</button>
<br>
<button onclick="appendNumber(1)">1</button>
<button onclick="appendNumber(2)">2</button>
<button onclick="appendNumber(3)">3</button>
<button onclick="appendOperator('+')">+</button>
<br>
<button onclick="appendNumber(4)">4</button>
<button onclick="appendNumber(5)">5</button>
<button onclick="appendNumber(6)">6</button>
<button onclick="appendOperator('-')">-</button>
<br>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="appendOperator('*')">*</button>
<br>
<button onclick="appendNumber(0)">0</button>
<button onclick="calculate()">=</button>
<button onclick="appendOperator('/')">/</button>

<script>
var display = document.getElementById('display');
var expression = '';

function appendNumber(number) {
  expression += number;
  display.value = expression;
}

function appendOperator(operator) {
  expression += operator;
  display.value = expression;
}

function clearDisplay() {
  expression = '';
  display.value = expression;
}

function calculate() {
  try {
    var result = eval(expression);
    expression = result.toString();
    display.value = expression;
  } catch(error) {
    display.value = 'Error';
  }
}
</script>

</body>
</html>

这段代码创建了一个简单的计算器界面，包含一个显示器用来显示计算结果和用户输入的表达式。按钮用来输入数字、运算符和执行计算操作。JavaScript代码定义了一些函数来处理用户的输入，包括追加数字和运算符到表达式中，清空显示器，以及执行计算操作。计算操作使用了JavaScript的eval函数来计算表达式的结果。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

下面是一个简单的JavaScript编程计算器代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Calculator</title>
    <style>
        .container {
            width: 300px;
            margin: 0 auto;
        }
        input[type="text"] {
            width: 100%;
            margin-bottom: 10px;
        }
        .btn {
            width: 25%;
            height: 50px;
            float: left;
            margin: 5px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="result" readonly>
        <div>
            <input type="button" value="7" class="btn" onclick="appendNumber('7')">
            <input type="button" value="8" class="btn" onclick="appendNumber('8')">
            <input type="button" value="9" class="btn" onclick="appendNumber('9')">
            <input type="button" value="+" class="btn" onclick="appendOperator('+')">
        </div>
        <div>
            <input type="button" value="4" class="btn" onclick="appendNumber('4')">
            <input type="button" value="5" class="btn" onclick="appendNumber('5')">
            <input type="button" value="6" class="btn" onclick="appendNumber('6')">
            <input type="button" value="-" class="btn" onclick="appendOperator('-')">
        </div>
        <div>
            <input type="button" value="1" class="btn" onclick="appendNumber('1')">
            <input type="button" value="2" class="btn" onclick="appendNumber('2')">
            <input type="button" value="3" class="btn" onclick="appendNumber('3')">
            <input type="button" value="*" class="btn" onclick="appendOperator('*')">
        </div>
        <div>
            <input type="button" value="0" class="btn" onclick="appendNumber('0')">
            <input type="button" value="." class="btn" onclick="appendNumber('.')">
            <input type="button" value="=" class="btn" onclick="calculate()">
            <input type="button" value="/" class="btn" onclick="appendOperator('/')">
        </div>
        <div>
            <input type="button" value="C" class="btn" onclick="clearResult()">
        </div>
    </div>

    <script>
        function appendNumber(number) {
            document.getElementById('result').value += number;
        }

        function appendOperator(operator) {
            document.getElementById('result').value += operator;
        }

        function calculate() {
            var result = eval(document.getElementById('result').value);
            document.getElementById('result').value = result;
        }

        function clearResult() {
            document.getElementById('result').value = '';
        }
    </script>
</body>
</html>

这个代码示例创建了一个简单的计算器界面，包含一个文本框用于显示计算结果，以及一组按钮用于输入数字和运算符。通过JavaScript函数来处理按钮的点击事件。appendNumber函数用于将数字追加到结果文本框中，appendOperator函数用于追加运算符，calculate函数用于计算结果，clearResult函数用于清空结果文本框。

在这个示例中，使用了eval函数来计算结果。但是eval函数存在一些安全风险，因为它可以执行任意的JavaScript代码。在实际的计算器应用中，最好使用其他更安全的方法来计算结果，比如使用正则表达式或者自己编写解析和计算逻辑。此外，这个示例只支持简单的四则运算，可以根据需要扩展功能。

1年前 0条评论