JavaScriptを使用して簡単な計算機能を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptを使用して簡単な計算機能を実装するにはどうすればよいですか?

王林

Oct 27, 2023 pm 02:51 PM

javascript 電卓成し遂げる

如何使用 JavaScript 实现一个简单的计算器功能？

JavaScript を使用して簡単な電卓関数を実装するにはどうすればよいですか?

電卓は日常生活でよく使用されるツールの 1 つで、簡単な数学演算を実行するために使用できます。今回はJavaScriptを使って簡単な計算機能を実装してみます。この記事では、JavaScript を使用して基本的な数学演算と電卓インターフェイスを実装するコードを作成する方法を説明します。

まず、操作の結果を表示するためのテキストボックス、数字ボタン、および演算子ボタンを含む HTML ファイルを作成する必要があります。基本的な HTML 構造は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>简单计算器</title>
    <style>
        /* 样式可以根据个人喜好进行自定义 */
    </style>
</head>
<body>
    <input type="text" id="result" readonly>
    <br>
    <button onclick="buttonClick('1')">1</button>
    <button onclick="buttonClick('2')">2</button>
    <button onclick="buttonClick('3')">3</button>
    <button onclick="buttonClick('+')">+</button>
    <br>
    <button onclick="buttonClick('4')">4</button>
    <button onclick="buttonClick('5')">5</button>
    <button onclick="buttonClick('6')">6</button>
    <button onclick="buttonClick('-')">-</button>
    <br>
    <button onclick="buttonClick('7')">7</button>
    <button onclick="buttonClick('8')">8</button>
    <button onclick="buttonClick('9')">9</button>
    <button onclick="buttonClick('*')">*</button>
    <br>
    <button onclick="buttonClick('0')">0</button>
    <button onclick="buttonClick('.')">.</button>
    <button onclick="buttonClick('=')">=</button>
    <button onclick="buttonClick('/')">/</button>
    <br>
    <button onclick="clearResult()">清空</button>
</body>
</html>

ログイン後にコピー

上記の HTML コードでは、テキストボックス (ID は「result」) を使用して操作の結果を表示し、数字ボタン、演算子ボタン、およびクリアを追加します。ボタン。各ボタンには onclick イベントがあり、ボタンのクリックイベントを処理するために buttonClick という名前の JavaScript 関数を呼び出します。

次に、JavaScript ファイルに buttonClick 関数と clearResult 関数の実装を記述する必要があります。以下はサンプルコードです。

function buttonClick(value) {
    var result = document.getElementById("result");

    if (value === '=') {
        result.value = eval(result.value); // 使用 eval 函数计算表达式
    } else {
        result.value += value;
    }
}

function clearResult() {
    document.getElementById("result").value = "";
}

ログイン後にコピー

buttonClick 関数では、最初に getElementById メソッドを通じてテキストボックスへの参照を取得し、次に別の処理を実行します。ボタンの値に基づきます。ボタンの値が等号 (=) の場合、eval 関数を使用して式を評価し、結果をテキストボックスに表示します。それ以外の場合は、ボタンの値をテキストボックスのコンテンツに追加します。

clearResult この関数はテキストボックスの値を空の文字列に設定するだけで、クリア関数を実現します。

これで、上記の HTML コードと JavaScript コードを対応するファイルに保存し、ブラウザで HTML ファイルを開くことができます。基本的な数学演算を実行できる単純な計算インターフェイスが表示されます。

これは単なる単純な電卓の例であり、基本的な四則演算機能のみを実装しています。括弧や三角関数のサポートなど、より複雑な計算機能を実装したい場合は、コードをさらに改善する必要があります。ただし、この例では、JavaScript を使用して単純な電卓関数を実装する方法を確認できます。

この記事があなたのお役に立てれば幸いです。また、プログラミングが楽しくなることを願っています。

以上がJavaScriptを使用して簡単な計算機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7342

Java チュートリアル

1627

CakePHP チュートリアル

1352

Laravel チュートリアル

1265

PHP チュートリアル

1210

Related knowledge

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Mar 24, 2024 am 11:27 AM

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?ソーシャルメディアの台頭により、WeChatは人々の日常生活に欠かせないコミュニケーションツールの1つになりました。ただし、多くの人は、同じ携帯電話で同時に複数の WeChat アカウントにログインするという問題に遭遇する可能性があります。 Huawei 社の携帯電話ユーザーにとって、WeChat の二重ログインを実現することは難しくありませんが、この記事では Huawei 社の携帯電話で WeChat の二重ログインを実現する方法を紹介します。まず第一に、ファーウェイの携帯電話に付属するEMUIシステムは、デュアルアプリケーションを開くという非常に便利な機能を提供します。アプリケーションのデュアルオープン機能により、ユーザーは同時に

Huawei携帯電話にWeChatクローン機能を実装する方法 Mar 24, 2024 pm 06:03 PM

Huawei 携帯電話に WeChat クローン機能を実装する方法ソーシャルソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認するまず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。

PHP プログラミングガイド: フィボナッチ数列を実装する方法 Mar 20, 2024 pm 04:54 PM

プログラミング言語 PHP は、さまざまなプログラミングロジックやアルゴリズムをサポートできる、Web 開発用の強力なツールです。その中でも、フィボナッチ数列の実装は、一般的で古典的なプログラミングの問題です。この記事では、PHP プログラミング言語を使用してフィボナッチ数列を実装する方法を、具体的なコード例を添付して紹介します。フィボナッチ数列は、次のように定義される数学的数列です。数列の最初と 2 番目の要素は 1 で、3 番目の要素以降、各要素の値は前の 2 つの要素の合計に等しくなります。シーケンスの最初のいくつかの要素

Golang がゲーム開発の可能性を可能にする方法をマスターする Mar 16, 2024 pm 12:57 PM

今日のソフトウェア開発分野では、効率的で簡潔かつ同時実行性の高いプログラミング言語として、Golang (Go 言語) が開発者にますます好まれています。豊富な標準ライブラリと効率的な同時実行機能により、ゲーム開発の分野で注目を集めています。この記事では、ゲーム開発に Golang を使用する方法を検討し、具体的なコード例を通じてその強力な可能性を示します。 1. ゲーム開発における Golang の利点 Golang は静的型付け言語として、大規模なゲームシステムの構築に使用されます。

PHP ゲーム要件実装ガイド Mar 11, 2024 am 08:45 AM

PHP ゲーム要件実装ガイドインターネットの普及と発展に伴い、Web ゲーム市場の人気はますます高まっています。多くの開発者は、PHP 言語を使用して独自の Web ゲームを開発することを望んでおり、ゲーム要件の実装は重要なステップです。この記事では、PHP 言語を使用して一般的なゲーム要件を実装する方法を紹介し、具体的なコード例を示します。 1. ゲームキャラクターの作成 Web ゲームにおいて、ゲームキャラクターは非常に重要な要素です。ゲームキャラクターの名前、レベル、経験値などの属性を定義し、これらを操作するメソッドを提供する必要があります。

PHP で書かれた効率的なフィボナッチ数列計算機 Mar 21, 2024 am 10:06 AM

効率的なフィボナッチ数列計算機: フィボナッチ数列の PHP 実装は、非常に古典的な数学の問題です。ルールは、各数値が前の 2 つの数値の合計に等しい、つまり F(n)=F(n -1)+F です。 (n-2)、ここで F(0)=0 および F(1)=1。フィボナッチ数列を計算する場合、再帰的に実装できますが、値が増加するにつれてパフォーマンスの問題が発生します。そこで、この記事ではPHPを使った効率的なフィボナッチの書き方を紹介します。

Golangで正確な除算演算を実装する方法 Feb 20, 2024 pm 10:51 PM

Golang で正確な除算演算を実装することは、特に財務計算を含むシナリオや高精度の計算が必要なその他のシナリオでよくあるニーズです。 Golang の組み込みの除算演算子「/」は浮動小数点数に対して計算されるため、精度が失われる場合があります。この問題を解決するには、サードパーティのライブラリまたはカスタム関数を使用して、正確な除算演算を実装します。一般的なアプローチは、math/big パッケージの Rat タイプを使用することです。これは分数の表現を提供し、正確な除算演算を実装するために使用できます。

Golangを利用したデータエクスポート機能の実装について詳しく解説 Feb 28, 2024 pm 01:42 PM

タイトル: Golang を使用したデータエクスポート機能の詳細説明情報化の進展に伴い、多くの企業や組織は、データ分析やレポート作成などの目的で、データベースに保存されているデータをさまざまな形式でエクスポートする必要があります。この記事では、Golang プログラミング言語を使用してデータエクスポート機能を実装する方法を紹介します。これには、データベースへの接続、データのクエリ、データのファイルへのエクスポートの詳細な手順が含まれ、具体的なコード例も示されます。最初にデータベースに接続するには、Golang で提供されるデータベースドライバー (da など) を使用する必要があります。

See all articles

JavaScriptを使用して簡単な計算機能を実装するにはどうすればよいですか?

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック