用前端编写一个简易计算器（html+js+css）

最新推荐文章于 2023-08-14 15:50:28 发布

.Voyager

最新推荐文章于 2023-08-14 15:50:28 发布

阅读量2.6k

点赞数 2

文章标签： js css html

本文链接：https://blog.csdn.net/weixin_41667472/article/details/105529583

版权

先上效果图：

html代码：

<!DOCTYPE html>
<html>
<head>
	<title>calc</title>
	<link rel="stylesheet" type="text/css" href="calc.css">
	<script type="text/javascript" src="calc.js"></script>

</head>
<body onload="init()">
	<div id="div1">
		<div id="div2">
			<input type="text"  name="num" id="num"/>
		</div>
		
		<div id="div3">
			<input type="button" value="c" name="" id="" />
			<input type="button" value="←" name="" id="" />
			<input type="button" value="+/-" name="" id="" />
			<input type="button" value="/" name="" id="" />
			<input type="button" value="1" name="" id="n1" />
			<input type="button" value="2" name="" id="" />
			<input type="button" value="3" name="" id="" />
			<input type="button" value="*" name="" id="" />
			<input type="button" value="4" name="" id="" />
			<input type="button" value="5" name="" id="" />
			<input type="button" value="6" name="" id="" />
			<input type="button" value="-" name="" id="" />
			<input type="button" value="7" name="" id="" />
			<input type="button" value="8" name="" id="" />
			<input type="button" value="9" name="" id="" />
			<input type="button" value="+" name="" id="" />
			<input type="button" value="0" name="" id="" />
			<input type="button" value="." name="" id="" />
			<input type="button" value="=" name="" id="" />
			<input type="button" value="m" name="" id="" /> 
			
		</div>
	</div>
</body>
</html>

js代码：

function init(){
	var num=document.getElementById("num");
	num.value=0;
	num.disabled="disabled";
	// var n1=document.getElementById("n1");
	// n1.onclick=function(){
	// 	alert("123");
	// }
	
	var oButton=document.getElementsByTagName("input");
	var btn_num1;
	var fh;
	for(var i=0;i<oButton.length;i++){
		oButton[i].onclick=function(){
			if(isNumber(this.value)){
				//num.value=(num.value+this.value)*1;
				if(isNull(num.value)){
					num.value=this.value;
				}else{
					num.value=num.value+this.value;
				}
			}else{
				var btn_num=this.value;
				
				switch(btn_num){
					case "+":
					    btn_num1=Number(num.value);
						num.value=0;
						fh="+";
						break;
					case "-":
						btn_num1=Number(num.value);
						num.value=0;
						fh="-"
						break;
					case "*":
						btn_num1=Number(num.value);
						num.value=0;
						fh="*"
						break;
					case "/":
						btn_num1=Number(num.value);
						num.value=0;
						fh="/"
						break;
					case ".":
						num.value=dec_number(num.value);
						break;	
					case "←":
						num.value=back(num.value);
						break;
					case "c":
						num.value="0";
						break;
					case "+/-":
						num.value=sign(num.value);
						break;
					case "=":
						switch(fh){
							case "+":
								num.value=btn_num1+Number(num.value);
								break;
							case "-":
								num.value=btn_num1-Number(num.value);
								break;
							case "*":
								num.value=btn_num1*Number(num.value);
								break;
							case "/":
							if(Number(num.value)==0){
								alert("除数不能为0");
								num.value=0;
							}else{
								num.value=btn_num1/Number(num.value);
								break;
							}
									
						}
						break;
						case "m":
							alert("欢迎使用计算器！");
							break;
					
				}
			}
		}
	}
	
	
};
/*正负号*/
function sign(n){
	if(n.indexOf("-")==-1){
		n="-"+n;
	}else{
		n=n.substr(1,n.length);
	}
	return n;
}
/*退位建*/

function back(n){
	n=n.substr(0,n.length-1);
	if(isNull(n)){
		n="0";
	}
	return n;
	
};
/*小数点*/
function dec_number(n){
	if(n.indexOf(".")==-1){
		n=n+".";
	}
	return n;
};

function isNumber(n){
	// if(!isNaN(n)){
	// 	return true;//参数n是数字
	// }else{
	// 	return false;//参数n不是数字
	// }
	return !isNaN(n);
};
/*
验证文本框是否为空或者0
*/

function isNull(n){
	
	if(n=="0"||n.length==0){
		return true;
	}else{
		return false;
	}
}

css代码：

*{
	margin: 0px;
	padding: 0px;
}
div{
	width: 170px;
}
#div1{
	top:90px;
	left: 100px;
	position: absolute;
	border-radius: 6px;
}
input[type="button"]{
	width: 30px;
	margin-right: 5px;
	border: none;
	outline: none;
	border-radius: 6px;
	background-color: darkgrey;
}
input[type="text"]{
	width:145px ;
	text-align: right;
	background-color: #fff;
	border: 1px solid;
	padding-right: 3px;
	box-sizing:content-box;
	border-radius: 6px;
	
}
input[type="button"]:hover{
	background-color: bisque;
	border: 0px solid;
}