ホームページ > 記事 > ウェブフロントエンド > jqueryを使った電卓の実装
jqueryを使った電卓の実装
- WBOYオリジナル
- 2023-05-14 09:38:36866ブラウズ
電卓は人々の日常生活に欠かせないツールの 1 つであり、Web 開発では実装が必要になることが多い機能の 1 つでもあります。この記事では、jQuery ライブラリを使用して、四則演算と小数演算をサポートし、キーボード入力が使用できる簡単な電卓を実装します。
まず、計算機をホストする 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 構造には、電卓のコンテナーがあり、2 つのサブ要素があります。1 つは表示領域、もう 1 つはキー領域です。表示領域には入力ボックスを使用して演算結果が表示され、キー領域には数字や演算子などのキー、およびその他の特殊キー (クリア、否定、パーセンテージなど) が含まれます。
次に、電卓を美しくするために 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 操作の処理を簡素化します。
最初に 3 つの変数をグローバルに定義する必要があります。
var firstNumber = ''; var operator = ''; var secondNumber = '';
これらの 3 つの変数には、ユーザーが入力した最初の数値、演算子、および 2 番目の数値がそれぞれ保存されます。
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 に保存され、演算子が変数演算子に保存され、現在の入力ボックスがクリアされます。ユーザーが等号をクリックすると、入力ボックスの値が 2 番目の数値として読み取られ、現在の演算子に基づいて対応する計算が実行され、計算結果が入力ボックスに表示されます。ユーザーがクリアキー、反転キー、パーセントキーをクリックすると、それぞれ対応する操作が実行されます。ユーザーがキーボード上の対応するキーを押すと、対応するキーのクリック イベントがシミュレートされます。たとえば、ユーザーが数字キーを押すと、対応する数字キーのクリック イベントがトリガーされます。
最後に、HTML ページ、CSS スタイル シート、JavaScript スクリプトを組み合わせて、簡単な計算機を実装しました。ユーザーはマウスやキーボードの操作で四則演算を実行でき、小数演算やクリア、否定、パーセンテージなどの特殊な演算も実行できます。この記事での実装は基本的なプロトタイプにすぎません。サポート ブラケットや科学計算など、より豊富な機能を実装する必要がある場合は、これをベースに拡張することもできます。
以上がjqueryを使った電卓の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。