【前端】【HTML+CSS+JavaScript(JS)】简易计算器的实现

最新推荐文章于 2023-10-24 15:39:34 发布

_小鹰

最新推荐文章于 2023-10-24 15:39:34 发布

阅读量236

点赞数

分类专栏：前端文章标签： css 前端 javascript html

本文链接：https://blog.csdn.net/cc2855816075/article/details/122888260

版权

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>calculator</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				border: 0px solid;
				font-size: "微软雅黑";
			}
			#b-box{
				text-align: center;
				position: relative;
				height: 785px;
			}
			
			#cal{
				border: 2px solid #AAAAFF;
				border-radius: 20px;
				width: 500px;
				height: 350px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -250px;
				margin-top: -250px;
			}
			
			#cal div{
				height: 60px;
			}
			
			.algorithm{
				display: inline-block;
			}
			.algorithm input{
				width: 50px;
				border-radius: 10px;
				background-color: #aaaaff;
				height: 28px;
				margin-left: 10px;
			}
			.algorithm input:hover{
				cursor: pointer;
				color: aliceblue;
				background-color: #ff5500;
			}
			#num1,#num2,#res{
				padding-left: 2px;
				border: 1px solid #b4b4b4;
				border-radius: 5px;
			}
			#tt{
				text-align: center;
				font-size: 40px;
				margin-top: 20px;
				margin-bottom: 20px;
				height: 60px;
			}
		</style>
	</head>
	<body>
		
		<script type="text/javascript">
			function add(){
				var num1 = document.getElementById("num1").value;
				var num2 = document.getElementById("num2").value;
				var res = eval(num1) + parseInt(num2);
				document.getElementById("res").value = res;
			}
			function subtract(){
				var num1 = document.getElementById("num1").value;
				var num2 = document.getElementById("num2").value;
				var res = eval(num1) - parseInt(num2);
				document.getElementById("res").value = res;
			}
			function multiply(){
				var num1 = document.getElementById("num1").value;
				var num2 = document.getElementById("num2").value;
				var res = eval(num1) * parseInt(num2);
				document.getElementById("res").value = res;
			}
			function divide(){
				var num1 = document.getElementById("num1").value;
				var num2 = document.getElementById("num2").value;
				var res = eval(num1) / parseInt(num2);
				document.getElementById("res").value = res;
			}
			function remainder(){
				var num1 = document.getElementById("num1").value;
				var num2 = document.getElementById("num2").value;
				var res = eval(num1) % parseInt(num2);
				document.getElementById("res").value = res;
			}
		</script>
		
		<div id="b-box">
			<div id="cal">
				<div id="tt"><label>计算器</label></div>
				<div>操作数1：<input type="text" id="num1" value="" /></div>
				<div>操作数2：<input type="text" id="num2" value="" /></div>
				<div class="algorithm"><input type="button" onclick="add()" value="+" /></div>
				<div class="algorithm"><input type="button" onclick="subtract()" value="-" /></div>
				<div class="algorithm"><input type="button" onclick="multiply()" value="×" /></div>
				<div class="algorithm"><input type="button" onclick="divide()" value="÷" /></div>
				<div class="algorithm"><input type="button" onclick="remainder()" value="Mod" /></div>
				<div>结&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;果：<input type="text" id="res" value="" /></div>
			</div>
		</div>
	</body>
</html>

_小鹰

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端】【HTML+CSS+JavaScript(JS)】简易计算器的实现

效果：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>calculator</title> <style type="text/css"> *{ margin: 0px; padding: 0px; border: 0px solid; font-size: "微软雅黑"; }
复制链接

扫一扫