JavaScript ベースの Web 計算機の実装

JavaScript ベースの Web 計算機の実装

この記事では、ウェブ計算機のマインスイーパゲームを実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

まず効果を見てみましょう:

さらに、この計算機にはデジタル機能とオペレータチェック機能も備わっています。

以下のソースコードを貼り付けます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>電卓</title>
<スクリプト言語="javascript">

 var oper1=prompt("最初のオペランドを入力してください:");
 var oper2 = prompt("2番目のオペランドを入力してください: ");
 var operator=prompt("演算子(+、-、​​、/)を入力してください");
 解析();
 var 結果;
 スイッチ(演算子)
 {
  ケース"+":
   結果=doSum(oper1,oper2);
   アラート(oper1+"+"+oper2+"="+結果);
   壊す;
  場合"-":
   結果 = doSubtract (oper1, oper2);
   アラート(oper1+"-"+oper2+"="+結果);
   壊す;
  場合"*":
   結果 = doMultiply(oper1,oper2);
   アラート(oper1+"*"+oper2+"="+結果);
   壊す;
  場合"/":
   結果 = doDivide(oper1,oper2);
   アラート(oper1+"/"+oper2+"="+結果);
   壊す;
  デフォルト:
   alert("入力された演算子は不正です");
  }
  関数解析(){
   if(isNaN(oper1)||isNaN(oper2)){
    alert("入力された番号は不正です");
    }
   それ以外{
    oper1 = parseFloat(oper1);
    oper2 = parseFloat(oper2);
    }
   }
  関数doSum(oper1,oper2){
   oper1+oper2 を返します。
   }
  関数doSubtract(oper1,oper2){
   oper1-oper2 を返します。
   }
  関数doMultiply(oper1,oper2){
   oper1*oper2 を返します。
   }
  関数doDivide(oper1,oper2){
   oper1/oper2 を返します。
   }
</スクリプト>
</head>

<本文>
</本文>
</html>

もちろん、ここに表示されているのは JavaScript のソースコードのみです。HTML+CSS を使用して電卓の外観をデザインすることもできます。ご自由にお使いください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 豊富なコンテンツと実用的なメソッドを備えた、JavaScript で書かれたシンプルな計算機です。おすすめ
  • 電卓操作を実現するシンプルなjsコード
  • jsはシンプルな計算機を実装します
  • HTML+JS は、シンプルな計算機コード (加算、減算、乗算、除算) を実装します。
  • JS で書かれたシンプルな計算機実装コード
  • javascript の簡単な計算機の実装手順の分解 (画像付き)
  • jsはシンプルな計算機を実装します
  • 計算機機能を実装するための純粋な JavaScript コード (3 つの方法)
  • jsウェブ計算機のシンプルな実装
  • ウェブ計算機 JS計算機

<<:  Linuxターミナルでの一般的なMySQL操作コマンドの詳細な説明

>>:  CentOS7で新しいデータディスクをマウントするための完全な手順

推薦する

TypeScriptのインストールと使用方法と基本的なデータ型

最初のステップはTypeScriptをグローバルにインストールすることですnpmを使用してインストー...

favico.ico---ウェブサイトicoアイコン設定手順

1. 正常に生成されたアイコン ファイルをダウンロードし、名前を favico.ico に変更して、...

Node.js を使用して C# のデータ テーブル エンティティ クラス生成ツールを作成する方法

Microsoft は T4 テンプレートを提供していますが、使用するのが非常に難しいと思います。ス...

HTML テーブルタグチュートリアル (21): 行の境界線の色属性 BORDERCOLOR

テーブルを美しくするために、行ごとに異なる境界線の色を設定できます。基本的な構文<TR 境界線...

CentOS 8 に htop をインストールする方法のチュートリアル

システムをインタラクティブに監視したい場合は、htop コマンドが最適な選択肢の 1 つです。 ht...

HTML でのアンカーポイントの使用_PowerNode Java アカデミー

ここで、アンカー ポイントを制御するいくつかの状況をまとめてみましょう。 1. 同じページ <...

Mac で Docker を使用して Oracle をデプロイする方法

Mac で Docker を使用して Oracle をデプロイする方法まずdockerをインストール...

さまざまなターミナルで Mac が SSH 経由でリモート サーバーに接続する方法の説明

Macはシェル(ターミナル)SSHを使用してリモートサーバーに接続します前提条件: 接続する必要があ...

Vue Router の 10 の高度なヒントのまとめ

序文Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js の...

MySQL 5.7 インストール MySQL サービスを開始できませんが、サービスはエラーを報告しません

MySQL 5.7 をインストールするには 2 つの方法があります。1 つはインストーラをダウンロー...

MySQL でのテーブルの作成と削除の詳細な例

テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します(タイ...

Centos7 esxi6.7 テンプレートの実際のアプリケーションの詳細な説明

1. Centos7.6システムを作成し、システムを最適化する1. NetworkManagerをオ...

Tomcat CentOS インストールプロセス図

Tomcat CentOS インストールこのインストール チュートリアルでは、次の内容について説明し...

Linux システムで grub.cfg ファイルの破損を修復する手順

目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...

HTML TextArea でのフォーマット保存の問題の解決方法

textarea の形式は保存時にデータベースに保存できますが、表示時には /n と相互に変換できな...