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 サーバー

推薦する

画像の盗難を防ぐために Nginx で Referer を設定する方法

サーバーの画像が他のウェブサイトからホットリンクされると、サーバーの帯域幅とアクセス速度に影響します...

ReactとReduxの配列処理の説明

この記事では、reduce()、filter()、map()、every()、some()、spre...

Vueはタブ切り替えを実装します

この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

Vue.js での VNode の使用

VNodeとはvue.js には VNode クラスがあり、これを使用してさまざまな種類の vnod...

ハイパーリンクAタグを学ぶ

聞く: CSS を使用してハイパーリンクのスタイルを設定しましたが、ホバーしても機能しません。なぜこ...

Webデザインの経験:ナビゲーションシステムをシンプルにする

<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...

Linux コマンドラインでメールを送信する 5 つの方法 (推奨)

シェル スクリプトで電子メールを作成する必要がある場合は、コマンド ラインから電子メールを送信する知...

MySQLでルートユーザーのパスワードを変更する方法

方法1: SET PASSWORDコマンドを使用する mysql> username@loca...

HTML と CSS を書くための 6 つの最も効果的な方法

この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...

MySql のグループ化と各グループからランダムに 1 つのデータを取得する

アイデア: 最初にランダムに並べ替えてからグループ化します。 1. テーブルを作成します。 テーブル...

CSSはletter-spacingプロパティを通じて単語間の間隔を制御します。

letter-spacing プロパティ: 文字間のスペース (文字間隔) を増減します。このプロ...

Vue echarts は棒グラフの動的な表示を実現します

この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...

Docker View プロセス、メモリ、カップ消費量

Docker プロセス、メモリ、カップ消費量を表示dockerコンテナを起動し、dockerinsp...

MySql インデックスを表示および最適化する方法

MySQL はハッシュ インデックスと Btree インデックスをサポートしています。 InnoDB...

Vueバインディングクラスとバインディングインラインスタイルの実装方法

目次バインディングクラスインラインスタイルのバインディングバインディングクラス方法1:オブジェクト構...