So implementieren Sie die Taschenrechnerfunktion mit Javascript-js-Tutorial-php.cn

So implementieren Sie die Taschenrechnerfunktion mit Javascript

王林

Freigeben： 2021-11-03 17:13:20

Original

3758 Leute haben es durchsucht

So verwenden Sie Javascript, um die Taschenrechnerfunktion zu implementieren: [function init(){ var num=document.getElementById("num"); var btn_num1;

So implementieren Sie die Taschenrechnerfunktion mit Javascript

Die Betriebsumgebung dieses Artikels: Windows 10-System, Javascript 1.8.5, Thinkpad T480-Computer.

Ich glaube, jeder hat beim Erlernen von Programmiersprachen wie der Verwendung von PHP, Java, Python und anderen Sprachen Taschenrechnerfunktionen geschrieben. Haben Sie jemals JavaScript verwendet, um die Taschenrechnerfunktion zu implementieren? Tatsächlich sind die Prinzipien dieselben, schauen wir uns das gemeinsam an!

HTML-Code:

<!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>`

Nach dem Login kopieren

JS-Code:

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";
}

Nach dem Login kopieren

CSS-Code:

*{
	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;
}

Nach dem Login kopieren

Empfohlenes Lernen: Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Taschenrechnerfunktion mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!