站长资讯网
最全最丰富的资讯网站

如何用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视频教程

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号