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で新しいデータディスクをマウントするための完全な手順

推薦する

MySQLのネクストキーロックのロック範囲についての簡単な説明

序文ある日、突然 MySQL の次のキー ロックについて尋ねられ、私の即座の反応は次のようなものでし...

MySQL全文インデックスを使用して検索エンジンのサンプルコードの簡易版を実現する

序文全文インデックスを使用できるのは Innodb と MyISAM ストレージ エンジンのみです ...

Tomcatはスレッドプールを使用してリモート同時リクエストを処理します。

Tomcatが同時リクエストを処理する方法を理解することで、スレッドプール、ロック、キュー、および...

HTML+CSS をベースにした素敵なフリップログインおよび登録インターフェースを作成します

素敵なフリップログインと登録インターフェースを作成する序文最近、ネットワーク ディスクを構築しようと...

MySQLでSQLクエリ文がどのように実行されるかを分析する

目次1. MySQL論理アーキテクチャの概要2. コネクタクエリキャッシュ4. パーサー5. オプテ...

CentOS のファイルと権限の基本操作チュートリアル

序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...

Linux仮想マシンの静的IPアドレスを構成するための手順を完了します

序文多くの場合、仮想マシンを使用します。たとえば、一部のテストは検出されません。何かを壊すことを心配...

Vueの最初のレンダリングのプロセス全体についての簡単な説明

目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...

Docker が占有するディスク領域をクリーンアップする方法

Docker は多くのスペースを占有します。コンテナを実行したり、イメージを取得したり、アプリケー...

Docker で Spring-boot プロジェクトをデプロイするためのサンプル コード

1. 基本的な Spring-boot クイックスタート1.1 クイックスタート pom.xml は...

Linux システムの .bash_profile ファイルの詳細な説明

目次1. 環境変数$PATH: 2. 環境変数を変更します。 3. bash_profileの目的要...

Linux に nginx をインストールする方法

Nginx は C 言語で開発されており、Linux で実行することをお勧めします。もちろん、Win...

CSS オーバーフローラップの新しいプロパティ値をどこでも使用

1.まず、overflow-wrap属性を理解する CSS のoverflow-wrapプロパティは...

ウェブサイトのハイパーリンクを開く方法に関する議論

新しいウィンドウが開きます。 利点: ユーザーがリンクをクリックしても、現在閲覧しているコンテンツは...

Vueはプログレスバーの変更効果を実現します

この記事ではVueを使ってプログレスバーの変更を簡単に実装してみましたので参考にしてください。具体的...