HTML+css+js创建简单计算器

最新推荐文章于 2023-12-28 10:26:55 发布

℡52Hz★

最新推荐文章于 2023-12-28 10:26:55 发布

阅读量944

点赞数 1

本文链接：https://blog.csdn.net/qq_53541336/article/details/123091288

版权

关键词由CSDN通过智能技术生成

一、先利用HTML创建计算器的整体样式框架，这里面呢应用最多的莫过于表单元素了input、button、label等这些标签。具体代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
	<div class="jsq">
		<hl>算术运算</hl>
		<form action="html" method="post">
			<div class="line">
				<label for="shuA" >数字A</label>
				<input type="text" name="shuA" id="num1" >
			</div>
			<div class="line1">
				<label for="shuB">数字B</label>
				<input type="text" name="shuB" id="num2" >
			</div>
			<div class="line2">
				<label for="resultC">结果C</label>
				<input type="text" name="resultC" id="num3" >
			</div>
			<div class="jia">
				<button type="button" id="jia">加</button>
			</div>
			<div class="jian">
				<button type="button" id="jian">减</button>
			</div>
			<div class="cheng">
				<button type="button" id="cheng">乘</button>
			</div>
			<div class="chu">
				<button type="button" id="chu">除</button>
			</div>
		</form>
	</div>	
	</body>
	
	
	<script src="js/app.js"></script>
</html>

二、在写完HTML后不能忘了给标签添加一些精美的样式来增加美感，这个就不能缺少css了，小伙伴们在写样式时第一步可不能忘记写公共样式哦，具体有哪些公共样式我前面的博客里也有总结一点，后面遇到了再去添加，下面是css的代码块：

.jsq{
	width: 450px;
	height:280px;
	background: #f1f1f1;
	margin-left: auto;
	margin-right: auto;
	margin-top:200px;
	border-style: solid;
	border-width: 2px;
	
}
.jsq hl{
	font-size: 23px;
	font-weight: bold;
	font-family: "arial rounded mt bold";
	padding-left: 200px;
}
.line label{
	font-size: 20px;
	padding-left: 30px;
	padding-top: 60px;
}
.line input{
	width: 310px;
	height: 30px;
}
.line1 label{
	font-size: 20px;
	padding-left: 30px;
	margin-top: 30px;
}
.line1 input{
	width: 310px;
	height: 30px;
	margin-top: 15px;
}
.line2 label{
	font-size: 20px;
	padding-left: 30px;
	margin-top: 30px;
}
.line2 input{
	width: 310px;
	height: 30px;
	margin-top: 15px;
}
.jia button{
	width: 75px;
	height: 30px;
	background: #ffb6c1;
	border-radius: 30px;
	border-color: #cea3aa;
	margin-left: 30px;
	margin-top: 30px;
	float: left;
}
.jian button{
	width: 75px;
	height: 30px;
	background: #87ceeb;
	border-radius: 30px;
	border-color: #cea3aa;
	margin-left: 23px;
	margin-top: 30px;
	float: left;
}
.cheng button{
	width: 75px;
	height: 30px;
	background: #ffb6c1;
	border-radius: 30px;
	border-color: #cea3aa;
	margin-left: 23px;
	margin-top: 30px;
	float: left;
}
.chu button{
	width: 75px;
	height: 30px;
	background: #87ceeb;
	border-radius: 30px;
	border-color: #cea3aa;
	margin-left: 23px;
	margin-top: 30px;
}

三、最后就是实现意想不到的效果的时候了，这个时候我们就得写上js来让我们创作的计算器更加的真实，且能实现加减乘除的运算，所下所示：

let a=document.getElementById("num1")
let b=document.getElementById("num2")
let c=document.getElementById("num3")		
let f1=document.getElementById("jia")
let f2=document.getElementById("jian")
let f3=document.getElementById("cheng")
let f4=document.getElementById("chu")
let f5=document.getElementById("C")		 
f1.onclick = ()=>{
    if(isNaN(a.value)||isNaN(b.value))
	{
	   c.value="输入错误请重新输入"
	   }
    else{
	   c.value = parseFloat(a.value)+parseFloat(b.value);
	    }
	}
f2.onclick = ()=>{
	if(isNaN(a.value)||isNaN(b.value)){
		c.value="输入错误请重新输入"
		}
	else{
		c.value = parseFloat(a.value)-parseFloat(b.value);
		}
	}
f3.onclick = ()=>{
	if(isNaN(a.value)||isNaN(b.value)){
		c.value="输入错误请重新输入"
		}
	else{
		c.value = parseFloat(a.value)*parseFloat(b.value);
		}
	}
f4.onclick = ()=>{
	if(isNaN(a.value)||isNaN(b.value)){
		c.value="输入错误请重新输入"
		}
	else{
		c.value = parseFloat(a.value)/parseFloat(b.value);
		}
	}
f5.onclick = ()=>{
	a.value = null;
	b.value = null;
	c.value = null;
}

四、看一下我做出来的效果吧

℡52Hz★

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
HTML+css+js创建简单计算器

一、先利用HTML创建计算器的整体样式框架，这里面呢应用最多的莫过于表单元素了input、button、label等这些标签。具体代码如下所示：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/public.css"> <link rel=
复制链接

扫一扫