如何用javascript实现计算器功能

用javascript实现计算器功能的方法：【function inIT(){ VAR num=document.getElementById("num"); num.value=0; var BTn_num1; var fh; ...】。

本文操作环境：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;
    ioButton.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;
}
//验证文本框是否为空或者为0function 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,可以转换成数字是falsefunction 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实现计算器功能的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！