JavaScriptを使用した電卓機能の実装方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptを使用した電卓機能の実装方法

王林

Nov 03, 2021 pm 05:13 PM

javascript 電卓

JavaScript を使用して電卓関数を実装する方法: [function init(){ var num=document.getElementById("num"); num.value=0; var btn_num1; var fh; ...] 。

JavaScriptを使用した電卓機能の実装方法

#この記事の動作環境: Windows10 システム、JavaScript 1.8.5、thinkpad t480 コンピューター。

おそらく誰もが、php、java、python、その他の言語を使用するなど、プログラミング言語を学習する過程で電卓関数を作成したことがあると思います。では、JavaScript を使用して電卓機能を実装したことがありますか?実際、原理は同じです。一緒に見てみましょう。

HTML コード:

<!DOCTYPE html>
<html>
<head>
	<title>js计算器</title>
<link rel="stylesheet" type="text/css"href="index.css">
<script type="text/javascript" src="index.js">
</script>
</head>
<body onload="init()">
	<!-- 1个文本框10个数字....20个按钮 -->
<div id="div1">
	<form action="">
	<div id="div2">
		<input type="text" name="num" disabled="disabled" id="num" value="0">
	</div>
	</form>
	<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>
</body>
</html>`

ログイン後にコピー

JS コード:

function init(){
	var num=document.getElementById("num");
	num.value=0;
	var btn_num1;
	var fh;
	num.disabled="disabled";
	// var n1=document.getElementById("n1");
	// n1.οnclick=function(){
	// }
	var oButton=document.getElementsByTagName("input");
	for(var i=0;i<oButton.length;i++){
		oButton[i].onclick=function(){
			if(isnumber(this.value)){
				//num.value=(num.value+this.value)*1;//把默认0消除
			if(isNull(num.value)){
				num.value=this.value;
			}else{
				num.value=num.value+this.value;
			}
			}else{
			//测试功能是否正确
				// alert("bushishuzi")
				var btn_num=this.value;
				//测试功能是否正确（弹窗）
				// alert(btn_num);
				switch(btn_num){
					case "+":
					// alert(11);
					btn_num1=num.value*1;//=parseInt(num.value)这个也可以,后面的话需要改为number
					num.value=0;
					fh="+";
					break;
					case "-":
					btn_num1=num.value*1;
					num.value=0;
					fh="-";
					break;
					case "*":
					btn_num1=num.value*1;
					num.value=0;
					fh="*";
					break;
					case "/":
					btn_num1=num.value*1;
					num.value=0;
					fh="/";
					break;
					case ".":
					num.value=dec_number(num.value);
					break;
					case "←":
					num.value=back(num.value);
					break;
					case "+/-":
					num.value=sign(num.value);
					break;
					case "AC":
					num.value="0";
					break;
					case "C":
					init_baidu();
					break;
					case "=":
					switch(fh){
						case"+":
						num.value=btn_num1+num.value*1;
						break;
						case"-":
						num.value=btn_num1-num.value*1;
						break;
						case"*":
						num.value=btn_num1*num.value*1;
						break;
						case"/":
						if(num.value==0){
							num.value=0;
							alert("除数不能为0");
						}else{
							num.value=btn_num1/num.value*1;
						}
						break;
					}
					break;
				}
			}
		}
	}
}
//小数点的功能
function dec_number(n){
	if(n.indexOf(".")==-1){
		n=n+".";
	}
	return n;
}
//验证文本框是否为空或者为0
function isNull(n){
	if(n*1==0||n.length==0){
		return true;
	}else{
		return false;
	}
}
//退位键
function back(n){
	n=n.substr(0,n.length-1);
	if(isNull(n)){
		n="0";
	}
	return n;
}
//正负号+/-
function sign(n){
	if(n.indexOf("-")==-1){
		n="-"+n;
	}else{
		n=n.substr(1,n.length);
	}
	return n;
}
//isNaN:不能转换成数字：true,可以转换成数字是false
function isnumber(n){
	return !isNaN(n);
	}
	//C按钮使用一个超级链接，链接到百度，这个可以随便发挥
function init_baidu(){
			window.location.href="http://www.baidu.com";
}

ログイン後にコピー

CSS コード:

*{
	margin:0px;
	padding:0px;
}
div{
	width:170px;
}
#div1{
	top:60px;
	left: 100px;
	position:absolute;
}
input[type="button"]{
	width:30px;
	margin-right: 5px;
}
input[type="text"]{
	width:147px;
	text-align: right;
	background-color:white;
	border:1px solid;
	padding-right:1px;
	box-sizing:content-box;
}
input[type="button"]:hover{/*//伪类和按钮的使用*/
	background-color:white;
	border:1px solid;
}

ログイン後にコピー

推奨学習: JavaScript ビデオチュートリアル

以上がJavaScriptを使用した電卓機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

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

7529

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

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を使った効率的なフィボナッチの書き方を紹介します。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

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版

ホットトピック