JavaScript を使用した Web 計算機の作成

JavaScript を使用した Web 計算機の作成

この記事は主にJavaScriptを使用してWeb計算機を実現する効果を記録し、参考として掲載しています。具体的な内容は次のとおりです。

簡単に言うと、コードは次のようになります。

まず HTML コードです:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>js を使用して Web 計算機を実装する</title>
    <link rel="スタイルシート" href="cal.css" >
</head>
<本文>
<div id="コンテナ" class="コンテナ">
    <input id="結果" class="結果">
    <div id="cal" class="clearfix">
        <div id="num" class="fl">
            <div id="top" class="clearfix">
                <input id="クリア" type="ボタン" 値="C">
                <input id="antonyms" type="button" value="+/-">
                <input id="残り" type="button" value="%">
            </div>
            <div id="bonttom" class="clearfix">
                <入力タイプ="ボタン" 値="7">
                <入力タイプ="ボタン" 値="8">
                <入力タイプ="ボタン" 値="9">
                <入力タイプ="ボタン" 値="4">
                <入力タイプ="ボタン" 値="5">
                <入力タイプ="ボタン" 値="6">
                <入力タイプ="ボタン" 値="1">
                <入力タイプ="ボタン" 値="2">
                <入力タイプ="ボタン" 値="3">
                <input class="zero" type="button" value="0">
                <input type="button" value=".">
            </div>
        </div>
        <div id="math" class="fr math">
            <input type="button" value="/" onclick="onclicknum('/')">
            <input type="button" value="*" onclick="onclicknum('*')">
            <input type="button" value="+" onclick="onclicknum('+')">
            <input type="button" value="-" onclick="onclicknum('-')">
        </div>
        <input id="res" type="button" value="=">
    </div>
</div>
</本文>
</html>

次は CSS スタイル コードです。

* {
    マージン: 0px;
    パディング: 0px;
}

.clearfix:before、.clearfix:after {
    コンテンツ: '';
    表示: ブロック;
}

.clearfix:後{
    クリア: 両方;
}

.clearfix {
    _ズーム: 1;
}

入力{
    表示: ブロック;
}

。容器 {
    幅: 240ピクセル;
    高さ: 400px;
    境界線: 2px 実線 #eb4509;
    マージン: 100px 自動;
}

.fl {
    フロート: 左;
}

.fr {
    フロート: 右;
}

入力{
    幅: 60ピクセル;
    高さ: 60px;
    境界線: 1px実線 #000;
    フロート: 左;
    背景: #ddd;
    フォントサイズ: 24px;
    色: #eb4509;
    -webkit-box-sizing: 境界線ボックス;
    -moz-box-sizing: 境界線ボックス;
    ボックスのサイズ: 境界線ボックス;
}

.math 入力 {
    フロート: なし;
}

入力.ゼロ{
    幅: 120ピクセル;
}

#番号{
    幅: 180ピクセル;
}

#cal #math {
    幅: 60ピクセル;
}

。結果 {
    幅: 100%;
    高さ: 100px;
    行の高さ: 100px;
    境界線: なし;
    背景色: #dfdfdf;
    フォントサイズ: 30px;
    フロート: なし;
    アウトライン: なし;
    テキスト配置: 右;
    右パディング: 20px;
    -webkit-box-sizing: 境界線ボックス;
    -moz-box-sizing: 境界線ボックス;
    ボックスのサイズ: 境界線ボックス;
}

最後に、js コード:

<script type="text/javascript">
    var 数値結果;
    var 文字列;

    var フラグ;
    var bot = document.getElementById("bonttom");
    var botInputs = bot.getElementsByTagName("入力");
    var clear = document.getElementById("clear");
    var res = document.getElementById("res");
    var math = document.getElementById("math");
    var mathInputs = math.getElementsByTagName("入力");
    var antonymsBtn = document.getElementById("antonyms");
    var 残りBtn = document.getElementById("残り");


    //数字をクリックして、加算、減算、乗算、除算を実行します。 imporIn(botInputs);
// 数学入力をイ​​ンポートします。

    関数imporIn(eles) {
        (var i = 0; i < eles.length; i++) の場合 {
            eles[i].onclick = 関数 () {
                onclicknum(この値);
            }
        }
    }

    //cボタンをクリアするにはクリックします clear.onclick = function () {
        クリッククリア();
    }

    //=記号をクリックして結果を取得します res.onclick = function () {
        クリック結果();
    }

    //+/-をクリック
    antonymsBtn.onclick = 関数 () {
        反意語();
    }

    //クリック %
    残りBtn.onclick = 関数(){
        残り();
    }

    関数 onclicknum(nums) {
        if (フラグ) {
            console.log("num=" + 数値);
            if (数値 !== "/" && 数値 !== "+" && 数値 !== "-" && 数値 !== "*") {
                str.value = "";

                console.log("aa" + 数値);
            }
        }
        フラグ = false;
        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;
        フラグ = true;
    }

    //正と負の数関数antonyms() {
        str = document.getElementById("結果");
        str.値 = -str.値;
    }

    //%
    関数の剰余() {
        str = document.getElementById("結果");
        str.値 = str.値 / 100;
    }
</スクリプト>

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

以下もご興味があるかもしれません:
  • HTML+JS に基づくシンプルな年齢計算ツールの実装
  • ネイティブ JavaScript を使用した Web 計算機の実装
  • JavaScriptで計算機機能を実現するプロセスの詳細な説明
  • JavaScriptはシンプルな計算機能を実装します
  • 計算機機能を実現するjsバージョン
  • シンプルな計算機を実装するためのネイティブ js
  • JavaScript で簡単な計算機を実装する
  • JavaScript の例 - 計算機の実装

<<:  VMware で VMware ツールをインストールしてもインストール ファイルが表示されない問題を解決する方法

>>:  無料のパブリック STUN サーバー

推薦する

HTML メタタグの使用の概要 (推奨)

メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...

mysql コマンドライン スクリプトの実行例

この記事では、例を使用して MySQL コマンドライン スクリプトの実行について説明します。ご参考ま...

CSS3のbox-shadowプロパティの使い方の詳細な例

CSS には多くの属性があります。特に複数の値を設定する必要がある属性は、長期間使用しないと忘れられ...

面接では、select...for update がテーブルをロックするのか、それとも行をロックするのか尋ねられました。

目次確認する:例の検証と組み合わせるselect クエリ ステートメントはロックされませんが、sel...

MySQL での IN データボリュームの使用の最適化された記録

MySQL のバージョン番号は 5.7.28 です。テーブル A には 390 万件のレコードがあり...

ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。

現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...

MySQL データベース開発仕様 [推奨]

最近、問題のある新しい SQL が本番データベースに入力される数を最小限に抑えるために、開発仕様を整...

ウェブページ作成によく使われる英語フォント

アリアルArial は、多くの Microsoft アプリケーションとともに配布されるサンセリフ T...

Vue はブラウザのパスワード記憶機能を無効にするサンプル コードを実装します

情報を探すインターネットで見つかったいくつかの方法: autocomplete="off&...

携帯電話向けウェブページ作成のヒント

現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル Web ページの書き方は、...

Nginx ロードバランシングの設定方法

目次Nginx 負荷分散構成Nginx 負荷分散戦略ポーリング(デフォルト)重さip_ハッシュ公正(...

ウェブサイトでページコンテンツや情報を直接コピーできない問題を解決する方法

最近では、多くのウェブサイトでは、ページ上の特定のコンテンツや情報を直接コピーすることは許可されてお...

Tomcat セキュリティ仕様 (Tomcat セキュリティ強化と仕様)

tomcat はオープンソースの Web サーバーです。Tomcat ベースの Web は実行効率...

HTML tbody の使用

構造化テーブル (IExplore のみ) 1) 行ごとにグループ化<thead> .....