계산기는 사람들의 일상생활에 없어서는 안될 도구 중 하나이며, 웹 개발에서 자주 구현해야 하는 기능 중 하나이기도 합니다. 이 기사에서는 jQuery 라이브러리를 사용하여 4가지 산술 연산과 소수 연산을 지원하고 키보드 입력을 사용할 수 있는 간단한 계산기를 구현해 보겠습니다.
먼저 계산기를 호스팅할 HTML 페이지를 만들어야 합니다. HTML 구조는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery计算器</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="calculator">
<div class="display">
<input type="text" id="result" readonly>
</div>
<div class="keys">
<button id="clear">AC</button>
<button id="sign">+/-</button>
<button id="percent">%</button>
<button class="operator" id="divide">/</button>
<button class="number" id="seven">7</button>
<button class="number" id="eight">8</button>
<button class="number" id="nine">9</button>
<button class="operator" id="multiply">*</button>
<button class="number" id="four">4</button>
<button class="number" id="five">5</button>
<button class="number" id="six">6</button>
<button class="operator" id="subtract">-</button>
<button class="number" id="one">1</button>
<button class="number" id="two">2</button>
<button class="number" id="three">3</button>
<button class="operator" id="add">+</button>
<button class="number" id="zero">0</button>
<button id="decimal">.</button>
<button id="equal">=</button>
</div>
</div>
</body>
</html>로그인 후 복사
이 HTML 구조에는 두 개의 하위 요소가 있는 계산기용 컨테이너가 있습니다. 하나는 표시 영역이고 다른 하나는 키 영역입니다. 표시 영역에는 입력 상자를 사용하여 작업 결과가 표시되고, 키 영역에는 숫자, 연산자 등의 키와 기타 특수 키(예: 지우기, 부정, 백분율 등)가 포함되어 있습니다.
다음으로 계산기를 아름답게 만들기 위해 CSS 스타일 시트를 만들어야 합니다. CSS 스타일은 다음과 같습니다.
body {
font-family: Arial, sans-serif;
}
#calculator {
margin: 0 auto;
width: 310px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.display {
padding: 10px;
background-color: #f2f2f2;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: right;
}
#result {
width: 100%;
height: 40px;
font-size: 24px;
border: 0;
}
.keys {
display: grid;
grid-gap: 1px;
grid-template-columns: repeat(4, 1fr);
background-color: #efefef;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
button {
width: 100%;
height: 50px;
font-size: 20px;
border: 0;
color: #fff;
background-color: #4CAF50;
cursor: pointer;
outline: none;
}
button:focus {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}로그인 후 복사
이 CSS 스타일에서는 테두리, 그림자, 둥근 모서리 등을 포함하여 계산기의 전반적인 스타일을 설정합니다. 키보드 키를 긴밀하게 배열하기 위해 CSS 그리드 레이아웃 기술을 사용하고 키 스타일을 설정했습니다.
다음으로 계산기의 논리를 처리하기 위한 JavaScript 스크립트를 작성해야 합니다. 우리는 jQuery 라이브러리를 사용하여 코드 작성 및 DOM 조작 처리를 단순화합니다.
먼저 세 가지 변수를 전역적으로 정의해야 합니다.
var firstNumber = '';
var operator = '';
var secondNumber = '';
로그인 후 복사
이 세 변수는 각각 사용자가 입력한 첫 번째 숫자, 연산자 및 두 번째 숫자를 저장합니다.
우리는 jQuery의 이벤트 핸들러 기능을 사용하여 주요 이벤트를 바인딩합니다. 예를 들어, 사용자가 숫자 키를 클릭하면 해당 숫자가 표시 영역의 입력 상자에 추가됩니다. 사용자가 더하기 및 빼기 키를 클릭하면 해당 연산자를 변수 연산자에 저장합니다. 사용자가 등호 키를 클릭하면 현재 연산자를 기반으로 해당 계산을 수행하고 결과를 입력 상자에 표시합니다. 구체적인 구현 코드는 다음과 같습니다.
$(document).ready(function() {
$('.number').click(function() {
var input = $('#result').val();
var number = $(this).text();
// 判断当前输入框中是否已经有小数点
if (number === '.') {
if (input.indexOf('.') !== -1) {
return;
}
if (input === '') {
input = '0';
}
}
input += number;
$('#result').val(input);
});
$('.operator').click(function() {
firstNumber = $('#result').val();
operator = $(this).text();
$('#result').val('');
});
$('#equal').click(function() {
secondNumber = $('#result').val();
var result = 0;
var num1 = parseFloat(firstNumber);
var num2 = parseFloat(secondNumber);
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
}
$('#result').val(result);
});
$('#clear').click(function() {
firstNumber = '';
operator = '';
secondNumber = '';
$('#result').val('');
});
$('#sign').click(function() {
var input = $('#result').val();
var prefix = '';
if (input.charAt(0) === '-') {
prefix = input.substr(1);
} else {
prefix = '-' + input;
}
$('#result').val(prefix);
});
$('#percent').click(function() {
var input = $('#result').val();
var percent = parseFloat(input) / 100;
$('#result').val(percent);
});
$(document).keydown(function(event) {
var key = event.key;
if (!isNaN(key)) {
$('#' + key).click();
} else if (key === '+' || key === '-' || key === '*' || key === '/') {
$('#' + key).click();
} else if (key === 'Enter') {
$('#equal').click();
} else if (key === '.') {
$('#decimal').click();
} else if (event.ctrlKey && (key === 'c' || key === 'C')) {
$('#clear').click();
}
});
});로그인 후 복사
이 JavaScript 스크립트에서는 jQuery의 이벤트 처리 기능click을 사용하여 주요 이벤트를 바인딩합니다. 사용자가 숫자 키를 클릭하면 현재 입력 상자의 값에서 입력된 숫자를 읽습니다. 키가 소수점인 경우 현재 입력 상자에 이미 소수점이 있는지 확인해야 합니다. , 키를 무시합니다. 사용자가 더하기 또는 빼기 기호를 클릭하면 현재 입력 상자의 숫자를 변수 firstNumber에 저장하고, 연산자를 변수 연산자에 저장하고, 현재 입력 상자를 지웁니다. 사용자가 등호를 클릭하면 입력 상자의 값을 두 번째 숫자로 읽고 현재 연산자를 기반으로 해당 계산을 수행하며 계산 결과가 입력 상자에 표시됩니다. 사용자가 지우기 키, 반전 키 또는 백분율 키를 클릭하면 해당 작업이 각각 수행됩니다. 사용자가 키보드에서 해당 키를 누르면 해당 키 클릭 이벤트를 시뮬레이션합니다. 예를 들어, 사용자가 숫자 키를 누르면 해당 숫자 키의 클릭 이벤트가 트리거됩니다.
마지막으로 HTML 페이지, CSS 스타일시트, JavaScript 스크립트의 조합을 통해 간단한 계산기를 구현했습니다. 사용자는 마우스나 키보드 조작을 통해 네 가지 산술 연산을 완료할 수 있으며 소수 연산 및 지우기, 부정, 백분율과 같은 기타 특수 연산을 수행할 수 있습니다. 이 기사의 구현은 단지 기본 프로토타입일 뿐이며, 대괄호 지원, 과학적 계산 등과 같은 보다 풍부한 기능을 구현해야 하는 경우 이를 기반으로 확장할 수도 있습니다.
위 내용은 jquery를 사용하여 계산기 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
