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 を応援していただければ幸いです。

以下もご興味があるかもしれません: