一个适合新手练习的js计算器

最新推荐文章于 2020-10-06 22:23:15 发布

梁李

最新推荐文章于 2020-10-06 22:23:15 发布

阅读量209

点赞数

分类专栏： js 文章标签： js 新手计算器 eval 简单

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天是20190624，我上网查询eval用法时偶遇一篇文章，特此分享！
原文：https://blog.csdn.net/sinat_34880701/article/details/79044603
下面是计算机预览图
在这里插入图片描述
下面是各模块代码

//这是css代码
<style>
html,body{width:100%;margin:0;padding:0;font-family:"微软雅黑";
}
.inputShow{width:100%;height:6rem;background-color:#222222;color:#FFFFFF;word-wrap:break-word;
	overflow-y:scroll;font-size:21px;letter-spacing:2px;margin-top:0.5rem;
}
#ResultShow{padding-top:1.5rem;margin-right:0.5rem;margin-left:0.5rem;height:2rem;
	line-height:2rem;font-size: 26px;font-weight:bold;color:#EE9A00;overflow:hidden;
}
.btnItem{width:60px;height:60px;line-height:60px;border-radius:100%;background-color:#222222;
	text-align:center;font-size:21px;color:#FFFFFF;margin:5px;
}
.btnItem:active{
	opacity:0.7;
}
.numItem{margin-top:30px;padding-bottom:25px;width:100%;
	max-width:280px;display:flex;flex-wrap:wrap;
}
</style>

//主页面代码
<body>
<div style="width:95%;max-width: 360px;background-color:#EAEAEA;margin:auto;">
	<div class="inputShow"><div id="inputtext" style="padding:1rem;">0</div></div>
	<center>
		<div id="ResultShow"></div>
		<div class="numItem">
			<div class="btnItem" onclick="clearinput()">AC</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">(</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">)</div>
			<div class="btnItem" style="background-color:#EE9A00" onclick="addinput(this.innerHTML)">+</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">1</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">2</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">3</div>
			<div class="btnItem" style="background-color:#EE9A00" onclick="addinput(this.innerHTML)">-</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">4</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">5</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">6</div>
			<div class="btnItem" style="background-color:#EE9A00" onclick="addinput(this.innerHTML)">×</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">7</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">8</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">9</div>
			<div class="btnItem" style="background-color:#EE9A00" onclick="addinput(this.innerHTML)">÷</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">0</div>
			<div class="btnItem" onclick="addinput(this.innerHTML)">.</div>
			<div class="btnItem" style="background-color:#CD3333;" onclick="deleteinput()">←</div>	
			<div class="btnItem" style="background-color:#008B45;" onclick="showresult()">=</div>
		</div>
	</center>
<div>
</body>

//这是js代码
<script>
	var inputtext = "";
	var textresult = "";

	function addinput(e){
		if(e == "÷"){e = "/"}else if(e == "×"){e = "*"}
		if(textresult == ""){
			if(e == "." && inputtext == ""){
				inputtext = "0."
			}else{
				inputtext += e;
			}
		}else{
			if( e=="+"||e=="-"||e=="*"||e=="/" && e!="." ){	//如果输入的是运算符,取之前的运算结果,继续计算
				//var text = textresult
				inputtext = textresult + e;
				textresult = "";
			}else{	//如果不是运算符,结果置空,重新输入
				textresult = "";
				if(e == "."){
					inputtext = "0."
				}else{
					inputtext = e;
				}
			}
		}
		document.getElementById("inputtext").innerHTML = inputtext;
	};

	function deleteinput(){
		if(inputtext == ""){
			document.getElementById("inputtext").innerHTML = "0";
		}else{
			inputtext = inputtext.substring( 0,inputtext.length-1 )
			document.getElementById("inputtext").innerHTML = inputtext;
		}
	};

	function showresult(){
		if(inputtext == ""){
			document.getElementById("ResultShow").innerHTML = "0";
		}else{
			try{
				textresult = eval(inputtext);
				if(textresult == "Infinity"){
					document.getElementById("ResultShow").innerHTML = "输入有误";
					textresult = "";
				}else{
					textresult = parseFloat(textresult);
					document.getElementById("ResultShow").innerHTML = textresult;	//超大数字使用科学计数法
				};
			}catch(err){
				document.getElementById("ResultShow").innerHTML = "输入有误";
				textresult = "";
			}
		}
	};

	function clearinput(){
		inputtext = "";
		textresult = "";
		document.getElementById("inputtext").innerHTML="0";
		document.getElementById("ResultShow").innerHTML =textresult;
	};

</script>