HTML+CSS+JavaScript写计算器

最新推荐文章于 2024-01-28 22:53:06 发布
最新推荐文章于 2024-01-28 22:53:06 发布
阅读量1.1k 收藏 15
点赞数 4
分类专栏： JavaScript 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JIAY_WX/article/details/125914701
版权

思维导图：

 

代码(HTML)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>calculator</title>
		<link rel="stylesheet" type="text/css" href="calculator.css"/>
	</head>
	<body>
		<div id="all">
			<div id="up">
				<div id="reset_1">
					<button id="reset" class="btn" onclick="calculator1('C')">C</button>
				</div>
				<div id="screen">0</div>
			</div>
			<div id="down">
				<button id="seven" class="btn" onclick="calculator(7)">7</button>
				<button id="eight" class="btn" onclick="calculator(8)">8</button>
				<button id="nine" class="btn" onclick="calculator(9)">9</button>
				<button id="add" class="btn" onclick="calculator1('+')">+</button>
				
				<button id="four" class="btn" onclick="calculator(4)">4</button>
				<button id="five" class="btn" onclick="calculator(5)">5</button>
				<button id="six" class="btn" onclick="calculator(6)">6</button>
				<button id="multiply" class="btn" onclick="calculator1('*')">*</button>
				
				<button id="one" class="btn" onclick="calculator(1)">1</button>
				<button id="two" class="btn" onclick="calculator(2)">2</button>
				<button id="three" class="btn" onclick="calculator(3)">3</button>
				<button id="subtract" class="btn" onclick="calculator1('-')">-</button>
				
				<button id="zero" class="btn" onclick="calculator(0)">0</button>
				<button id="point" class="btn" onclick="calculator1('.')">.</button>
				<button id="divide" class="btn" onclick="calculator1('/')">/</button>
				<button id="equal" class="btn" onclick="calculator1('=')">=</button>
			</div>
		</div>
	</body>
	<script>
		
		array=new Array();
		function calculator(n){
			//判断数组中是否有内容  有内容就计算更新数组  没有内容直接存放数据
			//数组中无内容
			if(array.length==0){
				document.getElementById("screen").innerHTML=n;
				array.push(n);
				console.log("数组中无内容，数据进组"+"  array值： "+array);
			}else if(array.length==1){
				//数组中只有一个符号或者数字
				let varia=array[0];
				varia=Number(varia)
	            if(isNaN(varia)){
					//说明数组长度1且为符号
					console.log("说明数组长度1且为符号");//+isNaN(varia)
					if(array[0]=='.'){
						array[0]=0.1*n;
						document.getElementById("screen").innerHTML='0.'+n;
					}else if(array[0]=='+'){
						array[0]=n;
						document.getElementById("screen").innerHTML=n;
					}else if(array[0]=='-'){
						array[0]=0-n;
						document.getElementById("screen").innerHTML='-'+n;
					}
					console.log("说明数组长度1且为符号再进数字之后    array值"+array[0]);
				}else{
					console.log("说明数组长度1且为数字");
					array[0]=array[0]*10+n;
					document.getElementById("screen").innerHTML=array[0];
					console.log("两次输入数字之后删除array中值"+"   array长度： "+array.length+" array值： "+array);
				}
				//转换为int
				
			}else{
				//数组中有两个值
				let p=array[0];
				let q=array[1];
				//数组中前一个值是数字 后一个是符号 
				if(q=='+'){
					console.log("array[0]=数字 array[1]=运算符  再次进来的是数字 值： "+n);
					let number=p+n;
					document.getElementById("screen").innerHTML=number;
					array=new Array();
					array[0]=number;
					console.log("此时数组长度  "+array.length+"  数组值为  "+array[0]);
				}
				else if(q=='-'){
					console.log("array[0]=数字 array[1]=运算符  再次进来的是数字 值： "+n);
					let number=p-n;
					document.getElementById("screen").innerHTML=number;
					array=new Array();
					array[0]=number;
					console.log("此时数组长度  "+array.length+"  数组值为  "+array[0]);
				}
				else if(q=='*'){
					console.log("array[0]=数字 array[1]=运算符  再次进来的是数字 值： "+n);
					let number=p*n;
					document.getElementById("screen").innerHTML=number;
					array=new Array();
					array[0]=number;
					console.log("此时数组长度  "+array.length+"  数组值为  "+array[0]);
				}
				else if(q=='/'){
					console.log("array[0]=数字 array[1]=运算符  再次进来的是数字 值： "+n);
					let number=p/n;
					document.getElementById("screen").innerHTML=number;
					array=new Array();
					array[0]=number;
					console.log("此时数组长度  "+array.length+"  数组值为  "+array[0]);
				}else if(q=='.'){
					console.log("array[0]=数字 array[1]=运算符  再次进来的是数字 值： "+n);
					let number=p+n*0.1;
					document.getElementById("screen").innerHTML=number;
					array=new Array();
					array[0]=number;
					console.log("此时数组长度  "+array.length+"  数组值为  "+array[0]);
				}
				
			}
			
		}
		function calculator1(m){
	        //array.length=0
			if(array.length==0){
				console.log("array.length=0  按键输入运算符为：  "+m);
				// for (let i=0;i<sign.length;i++){
					if(m=='*'||m=='/'||m=='='||m=='C'){
						document.getElementById("screen").innerHTML=0;
						// break;
					}else{
						//把符号放进数组
						array[0]=m;
						console.log("array.length:  "+array.length+"  array值：  "+array[0]);
						// break;
					}
				// }
				//array.length=1  且再调用符号函数
			}else if(array.length==1){
				console.log("array.length=1，按键输入运算符为：  "+m);
				//array.length=1  array[0]是运算符
				let varia=array[0];
				varia=Number(varia)
				if(isNaN(varia)){
					console.log("array[0]=运算符");
					if(m=='C'){
						array=new Array();
						document.getElementById("screen").innerHTML=0;
						console.log("清零  "+array.length);
					}else{
						array=new Array();
						document.getElementById("screen").innerHTML="输入错误 连续输入运算符";
						console.log("输入错误 连续输入运算符  "+array.length);
						// console.log("清零  "+array.length);
					}	
				
				}else{
					//array.length=1   array[0]=数字
					console.log("array[0]=数字");
					if(m=='+'||m=='-'||m=='*'||m=='/'){
						array[1]=m;
						console.
						log("array.length  "+array.length+"  array[1]值为  "+array[1]);
					}else if(m=='='){
						//说明数组长度1且为数字 再进来的符号是=
						
						document.getElementById("screen").innerHTML=array[0];
					}else if(m=='.'){
						let s=(array[0].toString()).indexOf('.');
						if(s==1){
							document.getElementById("screen").innerHTML=array[0];
						}else{
							array[1]=m;
							console.log("array.length  "+array.length+"  array[1]值为  "+array[1]);
						    document.getElementById("screen").innerHTML=array[0]+m;
						}
					}
					else{
						array=new Array();
						document.getElementById("screen").innerHTML=0;
						
					}
				}
				}
			}
	</script>
</html>

CSS

#all{
	background-color: rgb(202,255,112,0.9);
	width: 300px;
	padding:20px 40px;
	border-radius: 25px;
	display: flex;
	flex-direction: column;
	position: relative;
}
#up{
	width: 100%;
	display: flex;
	width: 30%;
}
#screen{
	position: absolute;
	width: 165px;
	height: 50px;
	left:120px;
	top:20px;
	margin: 9px 8px;
	border: 1px solid black; 
	background-color: rgb(162,205,90,0.9);
	border-radius: 10px;
	box-shadow: 5px 5px 5px #888888;
	font-size: 10px;
	text-align: right;
	line-height: 70px;
}
#down{
	display: flex;
	flex-wrap: wrap;
	
}
#equal{
	background-color: rgb(105,139,34, 0.7);
	border-radius: 100px;
	font-size: 25px;
	padding: 10px 15px;
	margin: 10px 0px;
}
#divide{
	background-color: rgb(105,139,34, 0.7);
	border-radius: 100px;
	font-size: 25px;
	padding: 10px 15px;
	margin: 10px 20px;
}
.btn{
	background-color: rgb(105,139,34, 0.7);
	border-radius: 100px;
	font-size: 25px;
	padding: 10px 15px;
	margin: 10px 10px;
	box-shadow: 5px 5px 5px #888888;
	
}

效果图

 总结 ：花费时间一天半  中间存在bug  （小数处理问题  还有大于10的数问题） bug没有处理  只是刷js题  刷思路  完全自己的思路  敲之前没有任何借鉴  所以算法可能很差    重在记录

菜鸟教程上关于计算器的代码（效果和我差的不是一点半点哈哈哈   加油）

<div class="center">
		<h1>HTML CSS, JavaScript 计算器</h1>
		<a href="https://github.com/guuibayer/simple-calculator" target="_blank"><i class="fa fa-github"></i></a>
		<form name="calculator">
			<input type="button" id="clear" class="btn other" value="C">
			<input type="text" id="display">
				<br>
			<input type="button" class="btn number" value="7" onclick="get(this.value);">
			<input type="button" class="btn number" value="8" onclick="get(this.value);">
			<input type="button" class="btn number" value="9" onclick="get(this.value);">
			<input type="button" class="btn operator" value="+" onclick="get(this.value);">
				<br>
			<input type="button" class="btn number" value="4" onclick="get(this.value);">
			<input type="button" class="btn number" value="5" onclick="get(this.value);">
			<input type="button" class="btn number" value="6" onclick="get(this.value);">
			<input type="button" class="btn operator" value="*" onclick="get(this.value);">
				<br>
			<input type="button" class="btn number" value="1" onclick="get(this.value);">
			<input type="button" class="btn number" value="2" onclick="get(this.value);">
			<input type="button" class="btn number" value="3" onclick="get(this.value);">
			<input type="button" class="btn operator" value="-" onclick="get(this.value);">
				<br>
			<input type="button" class="btn number" value="0" onclick="get(this.value);">
			<input type="button" class="btn operator" value="." onclick="get(this.value);">
			<input type="button" class="btn operator" value="/" onclick="get(this.value);">			
			<input type="button" class="btn other" value="=" onclick="calculates();">
		</form>
	</div>
/* Basic Reset */
* {
	border: none;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
}
body {

}
.center {
	background-color: #fff;
	border-radius: 50%;
	height: 600px;
	margin: auto;
	width: 600px;
}
h1 {
	color: #495678;
	font-size: 30px;	
	margin-top: 20px;
	padding-top: 50px;
	display: block;
	text-align: center;
	text-decoration: none;
}
a {
	color: #495678;
	font-size: 30px;	
	display: block;
	text-align: center;
	text-decoration: none;
	padding-top: 20px;
}
form {
	background-color: #495678;
	box-shadow: 4px 4px #3d4a65;
	margin: 40px auto;
	padding: 40px 0 30px 40px;	
	width: 280px;
}
.btn {
	outline: none;
	cursor: pointer;
	font-size: 20px;
	height: 45px;
	margin: 5px 0 5px 10px;
	width: 45px;
}
.btn:first-child {
	margin: 5px 0 5px 10px;
}
.btn, #display, form {
	border-radius: 25px;
}
#display {
	outline: none;
	background-color: #98d1dc;
	box-shadow: inset 6px 6px 0px #3facc0;
	color: #dededc;
	font-size: 20px;
	height: 47px;
	text-align: right;
	width: 165px;
	padding-right: 10px;
	margin-left: 10px;
}
.number {
	background-color: #72778b;
	box-shadow: 0 5px #5f6680;
	color: #dededc;
}
.number:active {
	box-shadow: 0 2px #5f6680;
  	-webkit-transform: translateY(2px);
  	-ms-transform: translateY(2px);
  	-moz-tranform: translateY(2px);
  	transform: translateY(2px);
}
.operator {
	background-color: #dededc;
	box-shadow: 0 5px #bebebe;
	color: #72778b;
}
.operator:active {
	box-shadow: 0 2px #bebebe;
  	-webkit-transform: translateY(2px);
  	-ms-transform: translateY(2px);
  	-moz-tranform: translateY(2px);
  	transform: translateY(2px);
}
.other {
	background-color: #e3844c;
	box-shadow: 0 5px #e76a3d;
	color: #dededc;
}
.other:active {
	box-shadow: 0 2px #e76a3d;
  	-webkit-transform: translateY(2px);
  	-ms-transform: translateY(2px);
  	-moz-tranform: translateY(2px);
  	transform: translateY(2px);
}
/* limpa o display */ 
document.getElementById("clear").addEventListener("click", function() {
	document.getElementById("display").value = "";
});
/* recebe os valores */
function get(value) {
	document.getElementById("display").value += value; 
} 

/* calcula */
function calculates() {
	var result = 0;
	result = document.getElementById("display").value;
	document.getElementById("display").value = "";
	document.getElementById("display").value = eval(result);
};

效果展示：

 

JIAY_WX
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html+js实现简单的计算器代码(加减乘除)
01-19
html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title></title> </head> <body> <input type=button value=add onclick=setOp('+', 'add');/> <input type=button value=miner onclick=
使用HTML、CSS和JavaScript实现一个简单的计算器
geng1025的博客
12-28 958
在本次博客中，我们将创建一个简单的计算器，该计算器使用HTML来构建用户界面，CSS来美化界面，并使用JavaScript来处理计算逻辑。首先，我们需要创建一个HTML文件，其中包含一个输入框、一个下拉列表和一个按钮。输入框用于输入两个数字，下拉列表包含四个运算符（+、-、*、/），按钮用于触发计算过程。在HTML中，我们使用<div>元素来创建计算器的各个部分，并使用<input>元素创建输入框和下拉列表。
快速使用HTML、CSS、JavaScript编写一个简单计算器
最新发布
bjjgff的博客
01-28 915
首先在根目录下创建一个名为 css的目录， 在css目录下创建 main.css样式文件。在index.html 文件的 head标签中，我们要引入css样式，编写以下标签。我们在项目目录当中创建一个 名为 index.html的文件，在文件中编写以下内容。首先创建一个名为 js的目录，在js目录下创建calculartor.js文件。因为HTML结构是比较单一化的，我们需要使用CSS样式对它进行美化。在index.html文件中的 body标签下，编写以下内容。三、编写JavaScript逻辑代码。
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 1923
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
使用 HTML、CSS 和 JavaScript 的实时计算器
很酷的站长的博客
12-02 1560
在本文中，我们将讨论如何使用HTML，CSS和JavaScript开发实时计算器。通常，如果我们观察任何实时计算器，我们知道它有 -数字网格（0-9 和 00）。一些基本的非主题运算符（+，-，/，x，%）。以及一些用于特殊操作的符号，例如（清除、退格、等于）我们所需程序的输出如下所示 -但是，为此，我们需要一个 UI 和逻辑编程来处理操作;其中 UI 是用户在其中与应用程序或网站交互的用户界面。在这种情况下，通过接口，我们指的是输出中显示的内容。它们可以包括显示屏、按钮、输入字段等。
前端项目---网页计算器（HTML+CSS+JavaScript）
m0_37671741的博客
04-22 7969
网页计算器 <html> <head> <title>计算器</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> /*设置div样式*/ #showdiv{ border: soli...
html+css+js实现简易计算器
热门推荐
weixin_45118138的博客
05-02 1万+
使用JavaScript制作一个简单的计算器 直接看效果，这个计算器可以实现简单的加减乘除 1、首先编辑HTML样式，把计算机上的按键全部打印出来 可以显示出以下结果 2、添加css样式 先设置a元素定宽定高，然后左浮动，在微调宽度和高度，使其到达一个合理布局的值 3、编写js代码 写一个for循环，不断接收a点击事件。 编写点击result，点击清零。 3. 点击数字，获取num1和num2的值。 4.获取按键加减乘除，记录下符号 5....
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等...
Html+CSS+JS网页计算器
04-21
Html+CSS+JS网页计算器
JavaScript+CSS+html计算器
04-22
使用JavaScript+CSS+html计算器，可以实现二元加减乘除计算，以及负数计算
原生态js计算器html+css+js
09-10
简单的js计算器。供参考，我的第一个javascript小程序,实现简单计算器
html5+css3+javascript实现加减乘除功能
04-03
在网页上实现加减乘除功能。用html5+css3+javascript实现加减乘除功能。实现一个简单的计算器。 <option value="+">+ <option value="-">- *">* <option value="/">/ ()" value="="> </form>
HTML + CSS + javascript 实现web版计算器
qq_39330735的博客
11-11 1481
一个简单的HTML计算器，有代码详解注释，这里运用了javascript，需要搭建相应的java环境，就Visual Studio Code的丢进去就可以运行
用 JavaScript 和 HTML 制作一个计算器
pydby01的博客
12-17 4128
引言 这是一篇很棒的文章，在这里你可以学习如何从零做出一款计算器。我们希望你使用 JavaScript 开发并且思考怎么构建一款计算器, 如何编写代码，以及最后，如何整理自己的代码。 在这篇文章结束，你会得到一款和 iPhone 计算器功能一样的计算器（除了 +/- 和百分比功能外）。 前置条件 在你开始本节课程前，请确保你对 JavaScript 有一个不错的了解。最起码，你需要知道以下事情： If/else 分支 For 循环 JavaScript 函数 箭头函数 &am...
<Java Web学习初级阶段>JavaScript实现简单网页计算器
拂晓弄尘影的博客
09-12 819
功能实现： 能够实现简单的加、减、乘、除、求余计算，可以进行带小数点和正负数的计算，C为清零按钮，CE为退格按钮。 界面截图： 页面布局代码： 计算器 table tr td{width:100px; height:60px; text-align:center;} #display{width:306px; height:60px; font-size
html+css+js 计算器案例（新手）
qq_65316680的博客
08-07 158
html+css+js 计算器案例（新手）
Java基础项目（内容超充实）：JavaEE前端JavaScript、CSS、HTML实现动态简易的计算器系统
CodingLJ
09-30 456
一. 项目简介 最近在复习web 前端，也上课了。课超级多，周一到周日，什么矩阵论，算法导论……头大~~ ①本项目是简易的计算器系统，实现的功能如下： 实现整数和小数的加减乘除操作 实现<—回退功能 实现文本框清屏功能 实现输入负数 实现点击按钮，跳转到其他网页 ② 本项目使用的具体技术如下（通过项目复习知识）： CSS在HTML中的引用： HTML中的div的使用，以及在CSS对标签的修饰 JS中方法的显式和隐式的方法使用 ③ 本项目的注...
通过html，css，javascript构建网页计算器
awo29548的博客
10-22 207
一、要求：通过html、css、javascript构建网页计算器 （1）能够实现简单的四则运算 （2）小数点保留两位 二、实现效果如图： 三、分析： 1、边框以及页面的构建：html以及css来实现 2、按钮：通过javascript（哪类按钮需要什么标签以及函数来实现？） （1）第一类按钮：数字、小数点、运算符。表达式的连接和输出。 （2）等于、运算符的计算...
用html、css、js写一个简易加法计算器
weixin_68478645的博客
01-15 1272
第二步：用css添加样式（比如：背景颜色，按钮样式，位置，）第三步：用js实现点击按钮获取用户输入的值，并计算求和。第一步：用HTML完成布局。
html+js+css计算器
06-09
好的，以下是一个简单的 HTML、CSS、JavaScript 实现的计算器： HTML 代码： ``` <!DOCTYPE html> <html> 计算器 , initial-scale=1.0"> <link rel="stylesheet" href="style.css"> ()">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值