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 バージョンの無料インストール構成チュートリアル

推薦する

HTMLの水平線注釈とコードコメントの使い方をマスターするだけです

水平線<hr /> タグを使用して、現在の位置に水平の分割線を描画します。例: XML/...

TypeScript インターフェース定義ケースチュートリアル

インターフェースの役割:インターフェース (英語: interface) の機能は、簡単に言えば、コ...

MySQL DEFINER の使用方法の詳細な説明

目次序文: 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文: MySQL データベー...

Dockerコンテナ間で通信する3つの方法

Docker コンテナは互いに分離されており、相互にアクセスできないことは誰もが知っていますが、依存...

WIN10 に複数のデータベースがインストールされている場合にコンピュータの速度低下を防ぐ方法

必要なときにサービスを有効にし、必要がないときは無効にします。データベース サービスを管理する方法:...

MySql における無効な Null セグメント判定と IFNULL() 失敗の解決策

MySql Nullフィールド判定とIFNULL失敗処理ps: (プロセスを表示したくない場合は、S...

html+css3で実装されたログインインターフェース

成果を達成するまずHTMLを使って基本的なフレームワークを構築します <本文> <...

HTML テーブル マークアップ チュートリアル (15): テーブル タイトル

<br />このタグを使用すると、表のタイトルを直接追加し、タイトル テキストの配置プロ...

MySQL の時間タイプの選択

目次日時タイムスタンプ選び方ミリ秒の時間を保存する方法結論MySQL は、日付と時刻を処理するために...

CSS3 のフィルタプロパティの使用に関する詳細な説明

最近、イントラネットポータルを修正していたときに、フィルターを使用する必要がある箇所に遭遇しました。...

MySQL スロークエリ pt-query-digest スロークエリログの分析

1. はじめにpt-query-digest は、MySQL のスロー クエリを分析するためのツール...

MySQL sql_mode の分析と設定の説明

昨夜、MySQL データベースにデータセットを挿入したときにエラーが発生しました。データベースは容赦...

7つの基本的なXHTMLコーディングルールの概要

1. すべてのタグには対応する終了タグが必要です以前の HTML では、<p> や &l...

Dockerはコンテナに入るためにnsenterツールを使用する

Dockerコンテナを使用する場合は、nsenterツールを使用する方が便利です。システムにない場合...