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

推薦する

ベスト HTML/CSS デザインおよび開発フレームワーク 15 選を紹介します

プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...

nginx+WordPressで個人ブログを構築するプロセス全体の詳細な説明

0x00 はじめにWordPress は、世界で最も人気のある CMS システムです。PHP と M...

Mysql はテーブル内の古いデータを定期的にクリアし、いくつかのデータを保持します (推奨)

以下の目標を達成するため: Mysql データベースは、一定の間隔 (2 時間または 1 日、カスタ...

W3Cチュートリアル（16）：その他のW3Cの活動

このセクションでは、その他の重要かつ興味深い W3C アクティビティの概要を説明します。このセクショ...

VMware仮想マシンにLinux（CentOS）をインストールするための詳細な構成手順

CentOS7をダウンロード私がダウンロードしたイメージはCentOS-7-x86_64-DVD-1...

HTML+CSS+JavaScriptにより、マウスの動きに合わせて選択したエフェクトの表示を実現します。

1. 表示効果: 2、HTML構造 <div class="プロセスリスト-lpu...

mini-vueレンダリングのシンプルな実装

目次序文ターゲット最初のステップ:ステップ2:ステップ3:ステップ4:要約する序文現在主流のフレーム...

モバイル開発におけるHTML5開発の現状を深く理解する

「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...

フロントエンドが習得すべき、複数列の等高レイアウトを実現するための CSS テクニック

1. はじめにページを作成しているときに、複数列のレイアウトに遭遇することがあります。各列の内容が異...

MySQLデータベースでゼロ値を含む日付の問題について簡単に説明します

デフォルトでは、MySQL は日付に 0 値を挿入することを受け入れますが、実際には日付の 0 値に...

MySQL で時刻と日付の型を保存する際の選択問題を分析する

一般的なアプリケーションでは、timestamp、datetime、int 型を使用して時間形式を保...

css input[type=file] スタイルの美化 (入力アップロードファイルスタイル)

効果： <!doctypehtml> <html> <ヘッド> ...

純粋な CSS で実装された大きなドロップダウン メニューのサンプル コード

これは純粋に CSS で実装された大きなドロップダウン メニューです。この大きなメニューは、js コ...

Ubuntuはカーネルモジュールをコンパイルし、その内容はシステムログに反映されます。

目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...

MySQL の lru リンク リストの簡単な分析

1. 従来のLRUリンクリストについて簡単に説明するLRU：最も最近使われなかったものLRU リンク...