使用JS基础知识实现的简易计算器

最新推荐文章于 2024-09-10 23:15:34 发布

转晴喵

最新推荐文章于 2024-09-10 23:15:34 发布

阅读量475

点赞数 9

文章标签： javascript css css3

本文链接：https://blog.csdn.net/th891166/article/details/140561798

版权

本期做的是一个简易计算器，可以实现基本的四则运算

效果如图：

要实现这个效果需要一个简单的CSS装点一下啦~

CSS代码如下，有部分关键注解仅供参考：

h1{
	font-family: cursive;/* 字体种类，这里是手写体 */
	color: black;
	word-spacing: 5px;/* 字体间距 */
	font-size: 60px;/* 字体大小 */
}

.calculators{
	height: 420px;
	width: 600px;
	background-color: skyblue;
	margin: auto;/* 页面居中 */
	margin-top: -40px;/* 减少与标题之间的距离 */
	border-color: black;/* 边框颜色 */
	border-width:5px ;/* 边框宽度 */
	border-style:solid ;/* 边框样式 */
	border-radius: 50px;/* 圆角边框 */
	display: flex;/* 父级元素使用flex属性，子元素的float、clear和vertical-align属性将失效。*/
	flex-wrap:wrap ; *//* 子项过多，超出主轴承受范围可换行*/
	/* justify-content: end; */
}
ul{
	list-style: none;/* 清除表单前面的点点 */
}
li{
	 font-size: 30px;
	color:darkred; 
	margin-top: 40px;
	line-height: 35px; 
	/* 设置li里面的文字样式 */
}
input[type="text"]{
	width:360px;
	height: 50px;
	border-color: #000000;
	border-width: 2px;
	font-size: 25px;
	/*设置input文本框的样式  */
}
.sign1{
	width: 100px;
	height: 60px;
	background-color: orange;
	border-radius: 30px;
	text-align: center;/* 使得内部文本上下左右居中 */
	line-height:60px ;/* 使得内部文本上下左右居中 */
	margin-left: 50px;
	margin-right: 30px;
	font-size: 30px;
	font-family: cursive;
}
.sign2{
	width: 100px;
	height: 60px;
	background-color: orange;
	border-radius: 30px;
	text-align: center;
	line-height:60px ;
	float: left;
	margin-right: 30px;
	font-size: 30px;
	font-family: cursive;
}
.sign3{
	width: 100px;
	height: 60px;
	background-color: orange;
	border-radius: 30px;
	text-align: center;
	line-height:60px ;
	float: left;
	margin-right: 30px;
	font-size: 30px;
	font-family: cursive;
}
.sign4{
	width: 100px;
	height: 60px;
	background-color: orange;
	border-radius: 30px;
	text-align: center;
	line-height:60px ;
	float: left;
	margin-right: 30px;
	font-size: 30px;
	font-family: cursive;
}

HTML代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计算器</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css"/>
	</head>
	<body>
		<h1 style="text-align: center;">算数运算</h1>
		<div class="calculators">
			<ul id="mydata">
				<li>数值A：<input type="text" id="num1"></li>
				<li>数值B：<input type="text" id="num2"></li>
				<li>结果C：<input type="text" id="result"></li>
			</ul>
			<button class="sign1" onclick="jia()">加</button>
			<button class="sign2" onclick="jian()">减</button>
			<button class="sign3" onclick="cheng()">乘</button>
			<button class="sign4" onclick="chu()">除</button>
	</body>
	<script src="./js/calculators.js" ></script>
</html>

现在形式差不多有咯，要实现真正的四则运算需要再加一点点JS的代码，从上面的HTML可以看出来我这个JS是添加的外部链接噢！

JS代码如下：

function jia(){
	var num1=parseInt(document.getElementById("num1").value);
	var num2=parseInt(document.getElementById("num2").value);
	var result=num1+num2;
	document.getElementById("result").value=result;
}
function jian(){
	var num1=parseInt(document.getElementById("num1").value);
	var num2=parseInt(document.getElementById("num2").value);
	var result=num1-num2;
	document.getElementById("result").value=result;
}
function cheng(){
	var num1=parseInt(document.getElementById("num1").value);
	var num2=parseInt(document.getElementById("num2").value);
	var result=num1*num2;
	document.getElementById("result").value=result;
}
function chu(){
	var num1=parseInt(document.getElementById("num1").value);
	var num2=parseInt(document.getElementById("num2").value);
	var result=num1/num2;
	document.getElementById("result").value=result;
}

创作不易友友们点个小心心吧~