本教程将向您展示如何创建一个使用jQuery创建的简单在线计算器。

计算器可以用于加法、减法、乘法和除法等基本运算。

我们将使用HTML和CSS为页面上的元素设置样式，同时利用JavaScript中的事件侦听器根据用户交互修改它们的外观。让我们开始吧！ 

如何使用它:

1.为计算器界面创建HTML。复制此代码块并将其添加到您的网页中。

<div class="container">
  <div class="row">
      <button id="clear" value="">AC</button>
      <div class="screen"></div>
  </div>
  <div class="row">
      <button class="digit" value="7">7</button>
      <button class="digit" value="8">8</button>
      <button class="digit" value="9">9</button>
      <button class="operation" id="/">/</button>
  </div>
  <div class="row">
      <button class="digit" value="4">4</button>
      <button class="digit" value="5">5</button>
      <button class="digit" value="6">6</button>
      <button class="operation" id="-">-</button>
  </div>
  <div class="row">
      <button class="digit" value="1">1</button>
      <button class="digit" value="2">2</button>
      <button class="digit" value="3">3</button>
      <button class="operation" id="+">+</button>
  </div>
  <div class="row">
      <button class="digit" value="0">0</button>
      <button class="decPoint" value=".">.</button>
      <button class="equal" id="eql">=</button>
      <button class="operation" id="*">*</button>
  </div>
</div>

2.将以下CSS片段添加到您的CSS中。

/* optional */
@font-face {
  font-family: 'Digital-7';
  src: url('./fonts/Digital-7.ttf') format('embedded-opentype'), /* Internet Explorer */
  url('./fonts/Digital-7.ttf') format('woff2'), /* Super Modern Browsers */
  url('./fonts/Digital-7.ttf') format('woff'), /* Pretty Modern Browsers */
  url('./fonts/Digital-7.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('./fonts/Digital-7.ttf') format('svg'); /* Legacy iOS */
}
 
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
body {
  font-family: 'Digital-7';
  font-weight: normal;
  font-style: normal;
}
 
/* calculator styles */
.container {
  border: 1px dashed black;
  min-width: 310px;
  max-width: 310px;
  margin: 10px auto;
  overflow: auto;
  padding: 10px;
  border-radius: 5px;
}
 
.row {
  min-width: 290px;
  max-width: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
 
.screen {
  height: 40px;
  line-height: 28px;
  width: 190px;
  text-align: right;
  border: 1px solid black;
  border-radius: 5px;
  font-size: 30px;
  padding: 6px;
}
 
button {
  background-color: black;
  color: white;
  font-family: inherit;
  border: none;
  width: 50px;
  padding: 5px 15px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 20px;
  line-height: 30px;
}
 
button:active {
  background-color: lightgrey;
  color: black;
}

3.启用计算器应用程序的主要功能。复制JavaScript片段，并将其插入到最新的jQuery JavaScript库之后。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

var num1 = null; 
var num2 = null; 
var operator = null;
var total = 0;
var screenDisplay = '';
var numPeriod = 0;
 
$(document).ready(function() {
  $('#clear').on('click', function () {
    reset()
    displayScreen(total);
  });
 
  $('.digit').on('click', function (e) { 
    handleDigit(e);
  });
 
  $('.decPoint').on('click', function (e) {
    // Only add the decimal point if there is none present
    if (numPeriod == 0) {
      handleDigit(e);
      numPeriod++;
    }
  })
 
  $('.operation').on('click', function (e) {
    if (num1 == null) {
      return;
    } else if (num2 == null) {
      operator = e.target.id;
      displayScreen(num1 + operator);
      console.log({num1, operator, num2, total})
    } else {
      /* If both num1 and num2 are full, then push the 
      existing value to num1 and save the operator */
      num1 = compute(num1, num2);
      operator = e.target.id;
      num2 = null;
      displayScreen(num1 + operator);
      // console.log({num1, operator, num2, total})
    }
  });
 
  $('.equal').on('click', function (e) {
    if (num1) {
      if (!operator) {
        total = num1;
        displayScreen(num1);
        // console.log({num1, operator, num2, total})
        return;
      }
    }
 
    total = compute(num1, num2);
    displayScreen(total);
 
    operator = null;
    num1 = total;
    num2 = null;
  });
});
 
function compute(stringA, stringB) {
  let a = parseFloat(stringA);
  let b = parseFloat(stringB);
 
  switch (operator) {
    case "/":
      return (a / b).toFixed(3);
    case "-":
      return (a - b).toFixed(3);
    case "+":
      return (a + b).toFixed(3);
    case "*":
      return (a * b).toFixed(3);
    default:
      break;
  }
}
 
function displayScreen(text) {
  $('.screen').text(text);
  screenDisplay = text.toString();
}
 
function handleDigit(e) {
  if (num1 == null) {
    num1 = e.target.value;
    displayScreen(num1);
    // console.log({num1, operator, num2, total})
  } else if (operator == null) {
      num1 += e.target.value;
      displayScreen(num1);
      // console.log({num1, operator, num2, total})
  } else {
    if (num2 == null) {
      num2 = e.target.value;
      displayScreen(num1 + operator + num2);
      // console.log({num1, operator, num2, total})
    } else {
      num2 += e.target.value;
      displayScreen(num1 + operator + num2);
      // console.log({num1, operator, num2, total})
    }
  }
}
 
function reset() {
  num1 = null;
  num2 = null;
  operator = null;
  total = 0;
  numPeriod = 0;
}

预览截图

jQuery创建 简单在线计算器