電卓 Web アプリケーションの作成は、HTML、CSS、JavaScript を学習するための素晴らしいプロジェクトです。電卓はありふれたもの、またはむしろありふれたものですが、電卓をゼロから作成すると、HTML によるコンテンツの構造化、CSS による要素のスタイル設定、JavaScript によるインタラクティブ機能の追加など、Web 開発の基本的な概念を初心者が理解するのに役立ちます。
この概要では、完全に機能する電卓を作成するために必要なコードのすべての部分を説明します。このガイドでは、コードを提供するだけでなく、各行についても詳細に説明し、すべてがどのように組み合わされるかを確実に理解できるようにします。このプロジェクトが完了すると、カスタマイズしたり、より高度な機能を追加して拡張したりできる、スムーズでインタラクティブな計算機が完成します。
電卓の機能
この電卓には基本的な機能が含まれています:
現在の入力と結果を表示する表示領域。
数字ボタン (0 ～ 9) と追加の「00」ボタン。
算術演算ボタン: 加算 ( )、減算 (-)、乗算 (*)、除算 (/)。
特殊ボタン:
AC は現在の入力をクリアします。
DEL で最後の文字を削除します。
/- 正の数値と負の数値を切り替えます。
= 式を評価し、結果を表示します。
このプロジェクトでは、次の方法を学びます:
HTML を使用してユーザー インターフェイスを作成します。
CSS を使用して要素のスタイルを設定し、見た目の魅力を向上させます。
ボタンを処理するために JavaScript を使用して計算機ロジックを実装します
インタラクションと計算の実行。
ステップ 1: HTML 構造 - 電卓のレイアウトの構築
HTML コードは、計算機の基本構造を提供します。この部分では、ボタンや表示領域など、電卓を構成する要素を定義します。この効果には任意のエディターを使用できます。個人的には Visual Studio コードの方が好きです。計算機の完全な HTML コードは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Explanation</p>
<p>Document Type and Language Declaration:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
これが HTML5 ドキュメントであることをブラウザーに伝えます。
<html lang="en">
HTML ドキュメントを開始し、言語として英語を指定します。これにより、検索エンジンやスクリーン リーダーがドキュメントの言語を理解できるようになります。
ヘッドセクション:
<head>
ドキュメントにとって重要であるが、ユーザーには表示されないメタデータとリンクが含まれています。
<meta charset="UTF-8">
文字エンコーディングを設定し、ほとんどの言語との互換性を確保します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
さまざまなデバイスに合わせてレイアウトを調整することで、ページの応答性を高めます。
<title>Calculator</title>
ブラウザのタブに表示されるタイトルを設定します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Explanation</p>
<p>Document Type and Language Declaration:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
スタイルが定義されている CSS ファイルへのリンク。
電卓のレイアウト:
<html lang="en">
電卓の機能を処理する JavaScript ファイルへのリンク。
ステップ 2: CSS スタイル - 電卓インターフェイスのデザイン
構造ができたので、スタイリングに移りましょう。この CSS コードは、色、丸いボタン、影、レスポンシブなレイアウト調整を追加して、電卓をよりモダンに見せます。
<head>
説明
基本的なリセットとフォント:
<meta charset="UTF-8">
デフォルトのパディングとマージンを削除し、一貫したサイズにするためにボックス サイズをボーダー ボックスに設定し、最新のフォントを適用します。
ボディスタイリング:
body: Flexbox を使用して電卓コンテナを画面の中央に配置し、グラデーションの背景を適用します。
電卓コンテナ:
.calculator: パディング、丸い角、影を追加して、きちんとしたカードのような外観を実現します。
ディスプレイ入力:
入力: このスタイルにより、表示領域に大きなフォント サイズと右揃えが与えられ、実際の電卓の表示に似ています。
ボタンのスタイル:
.calculator button: 影の効果、白い文字の色、配置用の間隔を備えた円形のボタンを設定します。
.actionbtn、.clearbtn、および .enter: 特定のボタンを目立たせるためのスタイル (例: 演算子は緑、クリアは赤、イコールはオレンジ)。
ステップ 3: ここですべての Javascript ロジックが行われます - 電卓を機能させます
構造とスタイルが十分に完成したら、JavaScript を使用して機能を追加しましょう。このスクリプトを使用すると、ボタンのクリックを処理し、演算を実行し、結果を表示できます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
説明
ページ読み込み用のイベント リスナー:
<title>Calculator</title>
すべての HTML コンテンツがロードされた後にスクリプトが実行されるようにします。
入力変数とボタン変数:
<link rel="stylesheet" href="style.css">
表示領域を選択します。
<div> <p>Wraps the entire calculator interface. We’ll apply styles to this container to make it look like a calculator.<br> </p> <pre class="brush:php;toolbar:false"><input type="text" placeholder="0"> <p>This is the display area of the calculator, where we show the current number or result. It is disabled, so users can’t type directly.</p> <p>Buttons:<br> </p> <pre class="brush:php;toolbar:false"><button> <p>Clears the calculator display and resets the current calculation.<br> </p> <pre class="brush:php;toolbar:false"><button> <p>Deletes the last entered character.<br> </p> <pre class="brush:php;toolbar:false"><button> <p>Toggles between positive and negative values.<br> </p> <pre class="brush:php;toolbar:false"><button> <p>The division operator.</p> <p>Remaining button elements represent numbers (0–9), operators (+, -, *, /), and a decimal point (.). The = button (class="enter") is used to evaluate the expression.</p> <p>JavaScript File:<br> </p> <pre class="brush:php;toolbar:false"><script src="script.js"></script>
操作を簡単にするために、すべてのボタンを配列に集めます。
ボタンクリックイベント:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #0a0a0a, #3a4452);
}
.calculator{
border: 1px solid #a2a2a2;
padding: 20px;
border-radius: 20px;
background: transparent;
box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}
input{
width: 272px;
min-height: 100px;
border: none;
padding: 5px;
margin: 10px;
background: transparent;
font-size: 40px;
text-align: right;
cursor: text;
outline: none;
color: #fff;
}
input::placeholder{
color: #fff;
}
.calculator button{
width: 50px;
height: 50px;
margin: 10px;
border-radius: 50%;
border: none;
box-shadow: -5px 3px 10px rgba(9, 9, 9, 0.5);
background: transparent;
color: #fff;
cursor: pointer;
outline: none;
}
.calculator .actionbtn{
color: #1afe17;
}
.calculator .clearbtn{
background: #f31d1f;
}
.calculator .enter{
background: #f5881a;
}
各ボタンにクリック イベントを追加します。ボタンに応じて、さまざまなアクションが実行されます:
表示フォント サイズ調整: 入力長が 10 文字を超える場合、フォント サイズを小さくします。
等号 (=): eval() を使用して式を評価し、結果を表示します。エラー(無効な構文など)がある場合は、「エラー」と表示されます。
クリア (AC): 文字列をリセットし、表示をクリアします。
削除 (DEL): 文字列から最後の文字を削除し、表示を更新します。
数字ボタンと演算子ボタン: ボタンの値を文字列に追加し、表示を更新します。
トグル記号 ( /-):
* { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
現在の数値に -1 を掛けて、正の値と負の値を切り替えます。
結論として、HTML、CSS、JavaScript を使用してシンプルでありながら機能的な電卓 Web アプリを構築することは、初心者と経験豊富な開発者の両方にとって素晴らしいプロジェクトです。 HTML によって提供される構造基盤、CSS によって命を吹き込まれたスタイル要素、JavaScript によるインタラクティブな機能を慎重に組み合わせることで、その主な目的を果たすだけでなく、Web 開発の中核概念を示す直感的なツールを作成できます。
さらに、このプロジェクトはさらなる探求と強化のための幅広い可能性をもたらします。ここで学んだ教訓は、より複雑なプロジェクトのための包括的な基盤を提供します。 Web 開発は継続的な学習プロセスであり、このプロジェクトでは、コードの各行が機能的で魅力的なエクスペリエンスにどのように貢献するかを示します。
スキルを磨き続けながら、この電卓をさらに使いやすく強力にする方法を検討してください。さまざまなレイアウトを試し、追加の数学関数を実装してみてください。変更を加えるたびに、コーディング原則の理解が深まり、開発リソースが強化されます。
コーディングを楽しんでください!
以上がシンプルなウェブベースの計算機の構築: Html CSS と JavaScript を使用したステップバイステップのギルドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
