HTML5+CSS3+JS：计算器（代码全+解析+实现结果）

最新推荐文章于 2021-06-21 00:11:14 发布

濯一一

最新推荐文章于 2021-06-21 00:11:14 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Html5+Css3 文章标签：计算器 html5 css3 js 前端

本文链接：https://blog.csdn.net/weixin_44015669/article/details/115474975

这篇博客展示了如何使用HTML和JavaScript实现一个简单的计算器，包括加、减、乘、除和括号运算。同时，提到了Python实现计算器的可能性，强调了不同编程语言在实现此类交互式应用时的差异和技术选型的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML如何实现一个计算器？

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Yummy计算机</title>
		<style type="text/css">
		.bg{
			width:35%;
			height: 400px;
			background:pink;
			margin-left: 35%;
			margin-right: 35%;
		}
		.uup{
			width: 100%;
			height: 9%;
			text-align: "center";
		}
		.up{
			width: 88%;
			height: 12%;
			border: solid 1px black;
			margin: 3% 5% 2% 6%;
		}
		.down{
			width: 88%;
			height: 65%;
			border: solid 1px black;
			margin: 2% 6% 4% 6%;
		}
		.logo{
			width: 32%;
			height: 95%;
			margin-top: 0px;
			margin-left: 0px;
			/*background-color: pink;*/
			font-size: 24px;
			color: white;
		}
		.show{
			width: 100%;
			height: 100%;
			background-color: white;
		}
		.numtable tr td{
			width: 28%;
			height: 25%;
		}
		.numtable input{
			width: 75%;
			height: 100%;
			margin: 8%;
			background-color: white;
		}
		
		</style>
		<script type="text/javascript">
			window.onload=initZero;
	var str = new Array();//保留输入字符数组
	var numStr = new Array();//数字栈
	var charStr = new Array();//运算符栈
	var flag = new Array();//负数标志位，true表示负数，与运算符栈相等
	var buttonId = new Array("reset","plus","minus","del","num7","num8","num9","multiply","num4","num5","num6","divide","num1","num2","num3","point","leftbracket","num0","rightbracket","equal");
	//按钮ID名
	function $(id){
		return document.getElementById(id);
	}
	function initZero(){
		$("inputframe").value=0;//结果显示框清零
		initCE();//保存数据的栈和数组“清空”
		addListener();//为每个按钮添加click事件监听器
	}
	function initCE(){
		while(str.length!=0){
			str.pop();//删除数组最后一个元素
		}
		while(numStr.length!=0){
			numStr.shift();//删除数组第一个元素
		}
		while(charStr.length!=0){
			charStr.shift();//删除数组第一个元素
		}	
		while(flag.length!=0){
			flag.shift();
		}
		charStr[0] = "0";//运算符栈先插入一个优先级最低的“0”元素
		flag[0] = false;
	}
	function addListener(){
		for (var i=0; i<buttonId.length; i++){