JavaScript 创建一个简易计算器

最新推荐文章于 2023-11-05 20:49:23 发布

♚宁~er

最新推荐文章于 2023-11-05 20:49:23 发布

阅读量395

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/ning0er/article/details/108375897

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先看看样式
访问地址：计算器
在这里插入图片描述
下面用代码实现一下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width: 300px;
				height:500px;
				margin: 100px auto;
				border: 2px solid brown;
				background-color:blanchedalmond ;
				overflow: hidden;
				font-size: 40px;
			}
			#show{
				width: 258px;
				height: 70px;
				background-color:lightgray ;
				margin: 30px auto;
				margin-bottom: 20px;
				overflow: hidden;
			}
			#all{
				text-align: center;
			}

			button{
				width: 50px;
				height: 50px;
				background-color: greenyellow;
				font-size: 25px;
			}
			.fn{
				margin-left: 60px;

			}
			button:hover{
				background-color:#FF6600;
			}
		</style>
		<script type="text/javascript">
			window.onload=function () {
				var num=document.getElementsByClassName("num");
				var show =document.getElementById("show");
				var on =document.getElementById("on")
				var off=document.getElementById("off")
				var rs=document.getElementById("result");
				var dele=document.getElementById("dele");
				/*归0*/
				on.onclick=function () {
				 show.innerHTML="0 ";
				}
				/*关闭计算器*/
				off.onclick=function () {
				 show.innerHTML="";
				}
				for (i=0;i<num.length;i++) {
					num[i].onclick=function(){
						if(show.innerHTML==""){
							return;
						}
					if(show.innerHTML=="0 "){
						show.innerHTML=this.value;
					}
					/*判断如果输入运算符之后不能继续输入运算符*/
					else if((show.innerHTML.lastIndexOf("/")==show.innerHTML.length-1&&(this.value=="/"||this.value=="*"||this.value=="-"||this.value=="+"||this.value=="."))
					||(show.innerHTML.lastIndexOf("*")==show.innerHTML.length-1&&(this.value=="/"||this.value=="*"||this.value=="-"||this.value=="+"||this.value=="."))
					||(show.innerHTML.lastIndexOf("+")==show.innerHTML.length-1&&(this.value=="/"||this.value=="*"||this.value=="-"||this.value=="+"||this.value=="."))
					||(show.innerHTML.lastIndexOf("-")==show.innerHTML.length-1&&(this.value=="/"||this.value=="*"||this.value=="-"||this.value=="+"||this.value=="."))
					||(show.innerHTML.lastIndexOf(".")==show.innerHTML.length-1&&(this.value=="/"||this.value=="*"||this.value=="-"||this.value=="+"||this.value=="."))){
						show.innerHTML=show.innerHTML+"";
					}else{
						show.innerHTML+=this.value;
						}																
					}
				}
				/*计算结果*/
				rs.onclick=function () {
					if(show.innerHTML==""){
							return;
						}
					var res = eval(show.innerHTML)
					
					show.innerHTML=res;
				}
				/*退格*/
				dele.onclick=function () {
					if(show.innerHTML=="0 "){
						return;
					}
					show.innerHTML=show.innerHTML.slice(0,-1);
					if(show.innerHTML==""){
							show.innerHTML="0 "
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div style="text-align: center;">
				<span style="font-size: 25px;color: darkgoldenrod;">沙雕牌计算器</span>
			</div>
		  <div id="show">  	
		  </div>
			<div id="all">
				<div class="fn">
					<button id="off">off</button>
					<button id="on">on</button>
					<button id="dele">←</button>
				</div>
				<div id="">
					<button value="7" class="num">7</button>
					<button value="8" class="num">8</button>
					<button value="9" class="num">9</button>
					<button value="/" class="num">÷</button>
				</div>
				<div id="">
					<button value="4" class="num">4</button>
					<button value="5" class="num">5</button>
					<button value="6" class="num">6</button>
					<button value="*" class="num">×</button>
				</div>
				<div id="">
					<button value="1" class="num">1</button>
					<button value="2" class="num">2</button>
					<button value="3" class="num">3</button>
					<button value="-" class="num">-</button>
				</div>
				<div id="">
					<button value="0" class="num">0</button>
					<button value="." class="num">.</button>
					<button value="=" id="result">=</button>
					<button value="+" class="num">+</button>
				</div>

			</div>
		 </div>
	</body>
</html>