詳細なアイデアを備えたシンプルな計算機の HTML 実装

詳細なアイデアを備えたシンプルな計算機の HTML 実装

コードをコピー
コードは次のとおりです。

<!DOCTYPE html>
<html>
<meta name="content-type" content="text/html; charset=UTF-8">
<ヘッド>
<title>電卓</title>
<!-- キーの内容を文字列としてテキスト ボックスに保存します。ボタンが "=" の場合は、eval メソッドを呼び出して結果を計算し、その結果をテキスト ボックスに出力します。 -->
<script type="text/javascript">
var 数値結果;
var 文字列;
関数 onclicknum(nums) {
str = document.getElementById("メッセージ番号");
str.value = str.value + nums;
}
関数onclickclear() {
str = document.getElementById("メッセージ番号");
str.value = "";
}
関数 onclickresult() {
str = document.getElementById("メッセージ番号");
numresult = eval(str.value);
str.value = numresult;
}
</スクリプト>
</head>
<body bgcolor="affff">
<!-- キー テーブルを定義します。各キーはイベント トリガーに対応します -->
<表の境界線="1" 配置="中央" bgColor="#bbff77"
スタイル="高さ: 350px; 幅: 270px">
<tr>
<td colspan="4">
<input type="text" id="メッセージ番号"
スタイル="高さ: 90px; 幅: 350px; フォントサイズ: 50px" />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" id="1" onclick="onclicknum(1)"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
<td>
<input type="button" value="2" id="2" onclick="onclicknum(2)"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
<td>
<input type="button" value="3" id="3" onclick="onclicknum(3)"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
<td>
<input type="button" value="+" id="add" onclick="onclicknum('+')"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" id="4" onclick="onclicknum(4)"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
<td>
<input type="button" value="5" id="5" onclick="onclicknum(5)"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
<td>
<input type="button" value="6" id="6" onclick="onclicknum(6)"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
<td>
<input type="button" value="-" id="sub" onclick="onclicknum('-')"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" id="7" onclick="onclicknum(7)"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
<td>
<input type="button" value="8" id="8" onclick="onclicknum(8)"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
<td>
<input type="button" value="9" id="9" onclick="onclicknum(9)"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
<td>
<input type="button" value="*" id="mul" onclick="onclicknum('*')"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="0" id="0" onclick="onclicknum(0)"
スタイル="高さ: 70px; 幅: 190px; フォントサイズ: 35px">
</td>
<td>
<input type="button" value="." id="point" onclick="onclicknum('.')"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
<td>
<input type="button" value="/" id="division"
onclick="onclicknum('/')"
スタイル="高さ: 70px; 幅: 90px; フォントサイズ: 35px">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Del" id="clear"
onclick="onclickclear()"
スタイル="高さ: 70px; 幅: 190px; フォントサイズ: 35px" />
</td>
<td colspan="2">
<input type="button" value="=" id="result"
onclick="onclickresult()"
スタイル="高さ: 70px; 幅: 190px; フォントサイズ: 35px" />
</td>

</tr>

</テーブル>
</本文>
</html>

<<:  VirtualBox の仮想ディスク vdi ファイルの容量を拡張する方法 (グラフィック チュートリアル)

>>:  レスポンシブWebデザイン学習(1) - 画面サイズと使用率の決定

推薦する

MySQL解凍版のインストール手順の詳しい説明

1. 公式サイトにアクセスします: D:\mysql-5.7.21-winx64\bin をダウンロ...

MySQL シリーズ II マルチインスタンス構成

チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...

Reactでaxiosを使用してリクエストを送信する一般的な方法

目次Reactにaxios依存関係をインストールして導入するGETリクエストにaxiosを使用するa...

Vue検証コードコンポーネントの使い方の詳しい説明

この記事の例では、vue検証コードコンポーネントで使用される具体的な実装コードを参考までに共有してい...

Linux rpm および yum コマンドとその使用法の詳細な説明

RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...

XHTMLタグは適切に使用する必要があります

<br />123WORDPRESS.COM の以前のチュートリアルでは、Web ページ...

HTMLでのラジオ値の取得、割り当て、登録の詳細な説明

1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...

JavaScript Alert関数の実行順序の詳細な説明

目次質問分析する解決するAlert() 関数を置き換えるsetTimeOut関数まとめ質問数日前、J...

1 つの記事で Node.js の非同期プログラミングを学ぶ

目次 はじめに 同期 非同期とブロッキング JavaScript のノンブロッキング コールバック ...

react+antd.3x は IP 入力ボックスを実装します

この記事では、IP入力ボックスを実装するための react+antd.3x の具体的なコードを参考ま...

初心者向けウェブサイト構築チュートリアル: 10 日間でウェブサイトの構築方法を学ぶ

10 日間のチュートリアルでは、最も理解しやすい言語を使用し、最も基本的なことから始めて、誰もが W...

Raspberry Pi 3B+ に 64 ビット Ubuntu システムと Docker ツールをインストールする詳細な手順

Raspberry Pi 3B に 64 ビット アプリケーション (64 ビット JDK など) ...

CSS 前景と背景の自動カラーマッチング技術の紹介 (デモ)

1. カラーマッチング効果のプレビュー下の GIF に示すように、ボタンの背景色が徐々に薄くなると...

Ubuntuで顔認識ログインを実装するための完全な手順

1. Howdyをインストール: howdyプロジェクトアドレス sudo add-apt-repo...

CD コマンドを使わずに Linux でディレクトリ/フォルダに入る方法

ご存知のとおり、cd コマンドがないと、Linux でディレクトリを切り替えることはできません。それ...