JavaScript シミュレーション計算機

JavaScript シミュレーション計算機

この記事では、JavaScriptシミュレーション計算機の具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

関数:

1.ボタンをクリックして番号を入力します
2. 基本的な算術演算を実装し、必要な例外処理を追加します。
3. 小数点機能を実装し、例外処理を追加します。小数点は1回しか出現できません。
4. 正負の符号関数を実装する
5. 退位機能を実装します。最後の桁の場合は、表示ボックスに0が表示されます。
6. AC画面クリア機能

使用される知識ポイント:

1. 多数のカスタム関数を使用してビジネスロジックを実装する
2. イベントの柔軟な利用とイベント処理
3. 例外処理のためのプログラミング手法を習得する
4. プログラミングを実装するためのさまざまなアイデアを養い、実践する

総合演習の目的:

1. CSS、HTML、JSを効果的に組み合わせてビジネス機能を実現する
2. プログラミングのアイデア、問題解決能力、手法を訓練し、育成する
3. 事前に設定された目標を達成するために、さまざまなプログラミングのアイデアを実践し、活用する

そして最近 js を学び始めたのですが、とても興味深いです。Java の基礎を学んでいたときは、それほど興味がありませんでした。初めて使い始めたとき、js はとても興味深いと感じました。以下は簡単な計算機のソース コードです。

html ページ:

<!DOCTYPE html>
<html>
<ヘッド>
 <title>js 計算機</title>
<link rel="スタイルシート" type="text/css" href="index.css" >
<script type="text/javascript" src="index.js">
</スクリプト>
</head>
<body onload="init()">
 <!-- 1 つのテキスト ボックス、10 個の数字、... 20 個のボタン -->
<div id="div1">
 <フォームアクション="">
 <div id="div2">
 <input type="text" name="num" disabled="無効" id="num" value="0">
 </div>
 </フォーム>
 <div id="div3">
 <input type="button" name="" value="C" id="baidu">
 <input type="button" name="" value="←" id="">
 <input type="button" name="" value="+/-" id="">
 <input type="button" name="" value="/" id="">
 <input type="button" name="" value="7" id="">
 <input type="button" name="" value="8" id="">
 <input type="button" name="" value="9" id="">
 <input type="button" name="" value="*" id="">
 <input type="button" name="" value="4" id="">
 <input type="button" name="" value="5" id="">
 <input type="button" name="" value="6" id="">
 <input type="button" name="" value="-" id="">
 <input type="button" name="" value="1" id="" >
 <input type="button" name="" value="2" id="" >
 <input type="button" name="" value="3" id="" >
 <input type="button" name="" value="+" id="">
 <input type="button" name="" value="0" id="">
 <input type="button" name="" value="=" id="">
 <input type="button" name="" value="." id="">
 <input type="button" name="" value="AC" id="">
 </div>
</div>
</本文>
</html>

js ページ:

関数init(){
 var num = document.getElementById("num");
 数値=0;
 var btn_num1;
 var fh;
 num.disabled="無効";
 // var n1=document.getElementById("n1");
 //n1.onclick=関数(){
 // }
 var oButton = document.getElementsByTagName("input");
 for(var i=0;i<oButton.length;i++){
 oButton[i].onclick=関数(){
 if (isnumber (this.value)) {
 //num.value=(num.value+this.value)*1; //デフォルトの0を削除する if(isNull(num.value)){
 num.value=この値;
 }それ以外{
 数値=数値+この値;
 }
 }それ以外{
 //関数が正しいかどうかをテストする// alert("bushishuzi")
 var btn_num = this.value;
 //関数が正しいかどうかをテストする(ポップアップウィンドウ)
 // アラート(btn_num);
 スイッチ(btn_num){
 ケース「+」:
 // アラート(11);
 btn_num1=num.value*1; //=parseInt(num.value) これもOKですが、次の単語をnumberに変更する必要があります。
 数値=0;
 fh="+";
 壊す;
 場合 "-":
 btn_num1 = 数値*1;
 数値=0;
 fh="-";
 壊す;
 場合 "*":
 btn_num1 = 数値*1;
 数値=0;
 fh="*";
 壊す;
 場合 "/":
 btn_num1 = 数値*1;
 数値=0;
 fh="/";
 壊す;
 場合 "。":
 num.value=dec_number(num.value);
 壊す;
 ケース「←」:
 num.value=back(num.value);
 壊す;
 ケース「+/-」:
 num.value=sign(num.value);
 壊す;
 ケース「AC」:
 数値 = "0";
 壊す;
 ケース「C」:
 init_baidu();
 壊す;
 ケース "=":
 スイッチ(fh){
 ケース"+":
 数値=btn_num1+数値*1;
 壊す;
 場合"-":
 num.value=btn_num1-num.value*1;
 壊す;
 場合"*":
 数値=btn_num1*数値*1;
 壊す;
 場合"/":
 if(数値==0){
 数値=0;
 alert("除数は 0 にできません");
 }それ以外{
 num.value=btn_num1/num.value*1;
 }
 壊す;
 }
 壊す;
 }
 }
 }
 }
}
//小数点関数 function dec_number(n){
 if(n.indexOf(".")==-1){
 n=n+".";
 }
 n を返します。
}
//テキストボックスが空または0であることを確認します
関数isNull(n){
 n*1==0||n.length==0の場合{
 true を返します。
 }それ以外{
 false を返します。
 }
}
//戻るキー関数back(n){
 n = n.substr(0,n.length-1);
 if (isNull(n)) {
 0 の場合
 }
 n を返します。
}
//正負の符号 +/-
関数 sign(n){
 if(n.indexOf("-")==-1){
 n="-"+n;
 }それ以外{
 n = n.substr(1,n.length);
 }
 n を返します。
}
//isNaN: 数値に変換できない: true、数値に変換できる: false
関数isnumber(n){
 !isNaN(n) を返します。
 }
 //ボタン C は Baidu へのハイパーリンクを使用します。これは自由に使用できます。function init_baidu(){
 window.location.href="http://www.baidu.com";
}

CSS ページ:

*{
 マージン:0px;
 パディング:0px;
}
div{
 幅:170ピクセル;
}
#div1{
 上:60px;
 左: 100px;
 位置:絶対;
}
入力[type="button"]{
 幅:30px;
 右マージン: 5px;
}
入力[type="text"]{
 幅:147ピクセル;
 テキスト配置: 右;
 背景色:白;
 境界線:1px実線;
 パディング右:1px;
 ボックスのサイズ:コンテンツボックス;
}
input[type="button"]:hover{/*//疑似クラスとボタンの使用*/
 背景色:白;
 境界線:1px実線;
}

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

以下もご興味があるかもしれません:
  • js 正確なカウントダウン機能の共有
  • ID番号を確認するための超正確なJavaScriptメソッド
  • js ドラッグ アンド ドロップ テーブルでコンテンツ計算を実現する
  • jsはシンプルな計算機を実装します
  • Apple 電卓の JS 実装
  • シンプルな計算機機能を実現するJavaScript
  • JavaScript でテキストの行数を計算する方法
  • JavaScript の典型的なケースのシンプルな計算機
  • js 正確な計算

<<:  Ubuntuの基本設定: openssh-serverのインストールと使用

>>:  MySQL 5.7.18 バージョンの無料インストール構成チュートリアル

ブログ    

推薦する

Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...

Ubuntu 18.04 で SSH サービスをインストールして設定する方法

sshツールをインストールする1. ターミナルを開き、次のコマンドを入力します。 apt-getアッ...

Reactは複雑な検索フォームの展開と折りたたみ機能を実装します

時間に余裕を持って、過去を忘れましょう。前のセクションでは、[検索] フォームとクエリおよびリセット...

Linux usermod コマンドの使用

1. コマンドの紹介usermod (ユーザー変更) コマンドは、ユーザー アカウントを変更するため...

異なるページ間のJavaScriptデータ転送(URLパラメータ取得)

Web ページでは、あるページに情報を入力すると、別のページにジャンプし、入力した情報が別のページ...

MySQL データ圧縮パフォーマンス比較の詳細

目次1. テスト環境1.1 ハードウェアとソフトウェア1.2 テーブル構造2. テストの目的2.1 ...

Linux でのログ サーバーの設定に関するグラフィック チュートリアル

序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...

MySQL インデックスのクイックガイド

MySQL インデックスの確立は、MySQL の効率的な操作にとって非常に重要です。インデックスによ...

MySQL UPDATE ステートメントの「典型的な」落とし穴

目次1. 問題のあるSQL文たとえば、次の図のような質問をした人がいました。 問題は次のように要約で...

Vue で親コンポーネントから子コンポーネントにデータを渡すいくつかの方法

最近、Vue のソースコードを勉強していて、Vue で親コンポーネントと子コンポーネント間でデータを...

SSL で Nginx リバース プロキシを構成する簡単な手順

序文リバース プロキシは、Web 経由で行われたリクエスト (http と https の両方) を...

mysql charset=utf8 本当に意味が分かりますか

1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...

JavaScript 上級プログラミング: 変数とスコープ

目次1. 元の値と参照値2. インスタンス3. 範囲1. 元の値と参照値6 つの単純なデータ型の値は...

MySQLの重複排除操作を極限まで最適化する方法

目次1. インデックスと変数の賢い使用1. インデックスなしの比較テスト2. created_tim...

効率的なMySQLページングの詳細な説明

序文通常、大量のデータを扱う MySQL クエリには「ページング」戦略が採用されます。ただし、ページ...