使用javascript实现计算器总结

最新推荐文章于 2024-07-22 21:44:46 发布
最新推荐文章于 2024-07-22 21:44:46 发布
阅读量2.2k 收藏 20
点赞数 3
分类专栏： web前端 文章标签： javaScript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42518668/article/details/97396309
版权

 

效果展示：

思路：

用html实现计算器的基本外观结构

用css设计每个部分的样式，颜色边框等

使用js实现计算的算法，DOM事件的反应。

知识点总结：

html部分：

  1. 结构分为上下两部分，上部分显示输出，下部分输入。
  2. 输出分为结果和记录。
  3. 表格的结构为table->tr->th

Js部分：

  1. 每次输入后都会有一次响应。
  2. 输入获取的当前字符。
  3. 有两个状态，状态1为输入第一个操作数和运算符，状态2为输入第二个操作数。
  4. 在状态1和状态2下输入数字，运算符，C，CE，小数点，负号，等于号，删除号等待分别该怎么响应？是否要切换状态，是否要清空记录。
  5. 小数和负数时遇到删除怎么操作。
  6. 合理使用全局变量和局部变量。
  7. 数组的使用：var I = new Array(); 它的方法有push(),pop(),length.
  8. 常用的一些静态方法：Math.floor(),Math.round(),Math.pow(),
  9. 把字符变成数字用Numeber()对象，它还有判断是否为整数，浮点数等静态方法。
  10. Document类下的获取id的方法，根据id来修改元素的属性和内容。
  11. 事件反应：点击，放上鼠标，移开鼠标等等。
  12. 在事件反应时用this传递id指针。

Css总结：

  1. 盒子的概念：一个元素由内容+内填充（透明的）+border(不透明)+外填充（透明）四部分构成。分别设计每个部分的属性。
  2. Table中让所有单元格合并border是，在在外面的border元素中设置border-collapse:collapse;
  3. 元素的width和height设置的是内部内容的大小，其他三部分默认设置。
  4. 颜色设置。 

代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{
			border-collapse:collapse;
		}
		th{
			height: 80px;
			width: 125px;
			border: 1px solid #e6e6e6;
			margin: 0px 0px 0px 0px;
			padding:0px;
		}
		tr{
			
		}
	</style>
</head>
<body>
	<div style="height:515px;width:500px;border:solid #dbdbdb;margin:auto;">
		<div style="border: solid #dbdbdb; "> 
			<p id="output" style="height:30px;margin:0;width:480px;text-align:right;"></p>
			<p id ="result" style="height:70px;margin:0;width:450px;font-size:400%;text-align:right;margin-bottom: 0px;">0</p>
		</div>
		<div style="height:400px;width:500px;">
			<table style="height:400px width:500px">
				<tr>
					<th id="CE" onclick="i='CE';response();" onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'">CE</th><th id="C" onclick="i='C';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'">C</th><th id="#" onclick="i='#';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/shanchu.png" alt=""></th><th id="/" onclick="i='/';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/chuhao.png" alt=""></th>
				</tr>
				<tr>
					<th id="i7" onclick="i='7';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/icon-test_7.png" alt=""></th><th id="i8" onclick="i='8';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/icon-test_8.png" alt=""></th><th id="i9" onclick="i='9';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/icon-test_9.png" alt=""></th><th id="*" onclick="i='*';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/chenghao.png" alt=""></th>
				</tr>
				<tr>
					<th id="i4" onclick="i='4';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/icon-test_4.png" alt=""></th><th id="i5" onclick="i='5';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/icon-test_5.png" alt=""></th><th id="i6" onclick="i='6';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/icon-test_6.png" alt=""></th><th id="-" onclick="i='-';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/jianhao.png" alt=""></th>
				</tr>
				<tr>
					<th id="i1" onclick="i='1';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/icon-test.png" alt=""></th><th id="i2" onclick="i='2';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/icon-test_2.png" alt=""></th><th id="i3" onclick="i='3';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/icon-test_3.png" alt=""></th><th id="+" onclick="i='+';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/jiahao.png" alt=""></th>
				</tr>
				<tr>
					<th id="$" onclick="i='$';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/jianhao.png" alt=""></th><th id="i0" onclick="i='0';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/icon-test_1.png" alt=""></th><th id="." onclick="i='.';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/xiaoshudian.png" alt=""></th><th id="=" onclick="i='=';response();"onmouseover="style.background='#e6e6e6'" onmouseout="style.background='#ffffff'"><img src="img/dengyu.png" alt=""></th>
				</tr>	
			</table>
		</div>
	</div>
	<script>
		var i;
		var opr1 = 0;
		var opr2 = 0;
		var sta=1;
		var n1=1;
		var tag1 = 0;
		var n2=1;
		var tag2 = 0;
		var cache = new Array();
		var s = 1;
		function response(){
			if(sta == 1){
				if(i>='0' && i<='9'){
					if(cache[0] == '='){
						opr1 = 0;
						cache.pop();
						if(tag1 == 1 && opr1 >=0) opr1 = opr1 + Number(i) / Math.pow(10,n1++);
						else if(tag1 == 1 && opr1 < 0)opr1 = opr1 - Number(i) / Math.pow(10,n1++);
						else if(tag1 == 0 && opr1 >=0)opr1 = opr1 * 10 + Number(i);
						else opr1 = opr1 * 10 - Number(i);
					}
					else {
						if(tag1 == 1 && opr1 >=0) opr1 = opr1 + Number(i) / Math.pow(10,n1++);
						else if(tag1 == 1 && opr1 < 0)opr1 = opr1 - Number(i) / Math.pow(10,n1++);
						else if(tag1 == 0 && opr1 >=0)opr1 = opr1 * 10 + Number(i);
						else opr1 = opr1 * 10 - Number(i);
					}
					 document.getElementById("result").innerHTML = opr1;
				}
				else if(i == "$"){
					opr1 = -opr1;
					if(tag1 == 1 && Number.isInteger(opr1))document.getElementById("result").innerHTML = opr1.toString() + ".";
					else document.getElementById("result").innerHTML = opr1;
				}
				else if(i == "#" && cache[0] != "="){
					if(Number.isInteger(opr1)){
						if(tag1 == 1)tag1=0;
						else if(tag1==0 && opr1>=0)opr1 = Math.floor(opr1 / 10);
						else if(tag1==0 && opr1 < 0)opr1 = Math.round(opr1 / 10);
					}
					else{
						if(opr1 >= 0){
						    var a = (opr1 - Math.floor(opr1)) * Math.pow(10,n1-2);
						    opr1 = Math.floor(opr1) + (Math.floor(a) / Math.pow(10, n1-2));
						    n1--;
					    }
					    else{
					    	opr1 = -1 * opr1;
					    	var a = (opr1 - Math.floor(opr1)) * Math.pow(10,n1-2);
						    opr1 = Math.floor(opr1) + (Math.floor(a) / Math.pow(10, n1-2));
						    n1--;
						    opr1 = -1 * opr1;
					    }
					}
					if(tag1 == 1 && Number.isInteger(opr1))document.getElementById("result").innerHTML = opr1.toString() + ".";
					else document.getElementById("result").innerHTML = opr1;
				}
				else if(i == '.'){
					tag1 = 1;
					if(Number.isInteger(opr1))document.getElementById("result").innerHTML = (opr1.toString() + ".");
				}
				else if(i=='+' || i=='-' || i=='*' || i=='/'){
					if(cache[0] == '=')cache.pop();
					op = i;
					sta = 2;
					n1 = 1;
					tag1 = 0;
					cache[cache.length] = opr1.toString();
					cache[cache.length] = i;
					var outputs ="";
					for(j = 0;j<cache.length;j++){outputs = outputs + cache[j];}
					document.getElementById("output").innerHTML = outputs;
				}
				else if(i == "="){
					while(cache.length!=0)cache.pop();
					document.getElementById("output").innerHTML = "";
					document.getElementById("result").innerHTML = opr1;
					cache.push('=');
					n1=1;
					tag1 = 0;
				}
				else if(i == 'C' || i == "CE"){
					n1=1;
					tag1 = 0;
					while(cache.length!=0)cache.pop();
					opr1=0;
					document.getElementById("output").innerHTML = "";
					document.getElementById("result").innerHTML = opr1;
				}
			}
			else if(sta == 2){
				if(i>='0' && i<='9'){
					s = 0;
					if(tag2 == 1 && opr2 >=0) opr2 = opr2 + Number(i) / Math.pow(10,n2++);
					else if(tag2 == 1 && opr2 < 0)opr2 = opr2 - Number(i) / Math.pow(10,n2++);
					else if(tag2 == 0 && opr2 >=0)opr2 = opr2 * 10 + Number(i);
					else opr2 = opr2 * 10 - Number(i);
					document.getElementById("result").innerHTML = opr2;
				}
				else if(i == "$"){
					opr2 = -opr2;
					if(tag2 == 1 && Number.isInteger(opr2))document.getElementById("result").innerHTML = opr2.toString() + ".";
					else document.getElementById("result").innerHTML = opr2;
				}
				else if(i == "."){
					tag2 = 1;
					if(Number.isInteger(opr2))document.getElementById("result").innerHTML = opr2.toString() + ".";
				}
				else if(i == "#" && s==0){
					if(Number.isInteger(opr2)){
						if(tag2 == 1)tag2=0;
						else if(tag2==0 && opr2>=0)opr2 = Math.floor(opr2 / 10);
						else if(tag2==0 && opr2 < 0)opr2 = Math.round(opr2 / 10);
					}
					else{
						if(opr2 >= 0){
						    var a = (opr2 - Math.floor(opr2)) * Math.pow(10,n2-2);
						    opr2 = Math.floor(opr2) + (Math.floor(a) / Math.pow(10, n2-2));
						    n2--;
					    }
					    else{
					    	opr2 = -1 * opr2;
					    	var a = (opr2 - Math.floor(opr2)) * Math.pow(10,n2-2);
						    opr2 = Math.floor(opr2) + (Math.floor(a) / Math.pow(10, n2-2));
						    n2--;
						    opr2 = -1 * opr2;
					    }
					}
					if(tag2 == 1 && Number.isInteger(opr2))document.getElementById("result").innerHTML = opr1.toString() + ".";
					else document.getElementById("result").innerHTML = opr2;
				}
				else if(i=='+' || i=='-' || i=='*' || i=='/'){
					if(s==1){
						if(i == cache[cache.length-1]){}
						else {
							cache[cache.length-1] = i;
							var outputs="";
							for(j = 0;j<cache.length;j++){
								outputs = outputs + cache[j];
							}
							document.getElementById("output").innerHTML = outputs;
						}
					}
					else{
						switch (cache[cache.length-1]) {
							case '+':
							    opr1 = opr1 + opr2;
							    break;
							case '*':
							    opr1 = opr1 * opr2;
							    break;
							case '-':
							    opr1 = opr1 - opr2;
							    break;
						    case '/':
							    opr1 = opr1 / opr2;
							    break;
							default:
							    break;
						}
					    cache.push(opr2.toString());
					    cache.push(i);
					    var outputs ="";
					    for(j = 0;j<cache.length;j++){
					    	outputs = outputs + cache[j];
					    }
					    document.getElementById("output").innerHTML = outputs;
					    document.getElementById("result").innerHTML = opr1;
					    opr2 = 0;
					    tag2 = 0;
					    n2 = 1;
					    s=1;
				    }
				}
				else if(i == "="){
					switch (cache[cache.length-1]) {
						case '+':
							opr1 = opr1 + opr2;
							break;
						case '*':
							opr1 = opr1 * opr2;
							break;
						case '-':
							opr1 = opr1 - opr2;
							break;
						case '/':
							opr1 = opr1 / opr2;
							break;
						default:
							break;
					}
					while(cache.length!=0)cache.pop();
					document.getElementById("output").innerHTML = "";
					document.getElementById("result").innerHTML = opr1;
					opr2 = 0;
					sta = 1;
					cache.push('=');
					tag2 = 0;
					n2 = 1;
				}
				else if(i == 'C'){
					while(cache.length!=0)cache.pop();
					opr1=0;
					opr2=0;
					document.getElementById("output").innerHTML = "";
					document.getElementById("result").innerHTML = opr1;
					sta = 1;
					tag2 = 0;
					n2 = 1;
				}
				else if(i == "CE"){
					opr2 = 0;
					tag2 = 0;
					n2 = 1;
					var outputs ="";
					for(j = 0;j<cache.length;j++){
						outputs = outputs + cache[j];
					}
					document.getElementById("output").innerHTML = outputs;
					document.getElementById("result").innerHTML = opr2;
				}
			}
		}
	</script>
</body>
</html>

 

骑驴等花K
关注
  • 3
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用javascript写计算器
王浩然的博客
06-05 673
本人新手，如果有什么不足的地方，希望可以得到指点 今天尝试用javascript写一个计算器 首先把计算器的按钮做出来，用button做好了，这样可以不用设置太多的样式 button value="7" >7button>   按照上面把0-9数字的按钮都搞出来 当然还有+-*/=%这些按钮 顺便给每个按钮添加样式 如下: style> .s
简易计算器java实训报告.pdf
10-06
简易计算器java实训报告.pdf
JavaScript制作简易计算器知识点剖析
weixin_55355282的博客
07-12 880
前言：使用JavaScript制作一个计算器，使用到的知识点是 F5运行如图所示 页面中计算结果是字符串的拼接。不是想要的结果需要运用数据类型的转换。对象转换成这三种数据是没有意义的，因为对象里面可以放任意一种数据类型任意类型转数字（忽略代码不够优雅） 总结：Number(要转换的值） 把任意类型都转为数字parseInt() 把字符串转成整数型数字parseFloat() 把字符串转成浮点型（小数）数字 传进来的字符串必须是空格加数字开头或者数字开头，从数字开
前端 计算器设计实验报告
m0_71996621的博客
05-30 114
JavaScript课程实验报告，计算器的功能实现。
JS学习笔记：实现简易的计算器
weixin_46831501的博客
05-13 185
代码： <script> var num1 = prompt('请输入第一个值：'); var fu = prompt('请输入以下符合\n' + '+\n' + '-\n' + '*\n' + '/\n'); var num2 = prompt('请输入第二个值：'); function getResult(num1, num2) { switch (fu) { case
JS原生——编写简易计算器
m0_64954687的博客
12-06 9186
计算器
使用JavaScript 编写简单计算器
10-25
总结起来，创建一个简单的JavaScript计算器涉及到HTML、CSS和JavaScript的基本知识，包括事件处理、DOM操作和简单的数学计算。在这个过程中，我们还可以学习到如何在JavaScript中定义和调用函数，以及如何安全地处理...
Calculadora:使用javascript的计算器
05-29
在这个项目中，我们将详细探讨如何使用这些技术来构建一个"Calculadora"，即JavaScript实现的计算器。 ### 1. JavaScript基础 JavaScript是一种解释型的、跨平台的编程语言，主要用于增强网页的交互性。在这个...
JavaScript实现简单计算器
10-15
总结来说，JavaScript实现简单计算器涉及的主要知识点包括事件监听、字符串处理、运算符优先级、错误处理、表达式解析、结果展示以及HTML和CSS的使用。对于初学者而言，这个项目是一个很好的实践，能够巩固...
简易计算器实习报告
06-02
简单的加减乘除，判错，负号，小数点运算，核心运算中缀转后缀，后缀的运算
利用Javascript实现BMI计算器
11-26
以下是使用JavaScript实现BMI计算器的关键知识点： 1. **HTML结构**：首先，我们需要创建一个基本的HTML页面布局，包括输入身高和体重的文本框、一个计算按钮以及用于显示结果的两个输入框，分别用来展示理想体重和...
javascript实现简单计算器
11-27
总结来说，"javascript实现简单计算器"这个项目涵盖了JavaScript基础语法、DOM操作、事件监听、错误处理以及基本的界面设计。通过这个项目，初学者可以深入理解JavaScript在实际应用中的工作原理，并提升解决问题的...
用js做一个简单的计算器和计时器
XiaoFanMi的博客
04-14 465
完成简单的计算器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { width: 250px; height: 200px; background-color: #C0C0C0; } input{ width: 5
JavaScript实现计算器
weixin_55017780的博客
05-17 3274
运用运算符来制作一个简易的计算器，通过讲解来让大家认识一下计算器实现原理。 第一步、 构建HTML的布局，先写四个span标签备注好参数和运算符和结果，再写一个div盒子里面包含第二行内容，第二行代表参数一的input标签为了实现可以上下选择的效果只需要改变将input中type里text类型该为number类型即可，而代表运算符的是一个下拉框里面包含加减乘除，只需要在select标签里给四个option代表加减乘除。参数二则是一个input的文本框，计算的按钮则使用一个button按钮可以通过鼠标点击
前端案例：简易计算器的实现（dom操作、target、eval函数、try catch、switch-case）
m0_67402026的博客
03-02 1272
目录 一、案例效果 二、涉及要点 三、完整代码+详细注释 一、案例效果 二、涉及要点 1. 文本域标签 的 readonly 属性用于设置文本域文字为只读； 2. DOM 获取元素，getElementById()获取带有指定 id 的节点； 3. DOM 事件中的 target 是指获取事件的目标，即**触发事件的真实元素。**如下代码中： btn.onclick = function (e) { //判断只有点击到按钮上才会将信息录入“显示屏” if (e.target.no
js实现计算器，附思考过程。
returnadsss的博客
01-15 1305
今天的目的是做一个功能最全的计算器，按计划进行！ 界面用之前构思好的代码直接复用。 先理清思路： 1、数字（包括00）11个，（严格来说应该如果在一个运算结果出来后输入数据，则忽略运算结果，重新开始计算，这可以定义一个flag变量，但这里略去）。 2、运算符（包括%）5个，如果第一个输入的是运算符，则除了-号其它全部忽略，如果运算符前面别的合法表达式，则直接将 其计算出来，如果运算符前面是别的运算符，则用该运算符覆盖前面的运算符。 3、操作符（包括退格，等号，清零，小数点）4个，如果在等号前是一个运算符，则
Javascript 传统实体计算器的实现
weixin_42256997的博客
07-22 391
实体计算器 要求： 未发测试用例之前的想法： 首字母为0 不能出现2个运算符，若出现第二个运算符，应将第一个运算符计算完毕后再显示第二个运算符 等于号可以一直点击，然后可以一直运算上次运算方式 根据测试用例总结需求：（测试用例在下方） 初始为显示0，按其他数字需要覆盖0； 只显示当前操作数，不显示运算符； 第二次出现运算符时要需将前面的结果算出来并作为左操作数； 等于号可以一直点击，然后可以一直运算上次运算方式； 运算完成之后，点击数字按钮则会覆盖原数字；连续点击两次运算符，第二个运算符会覆盖第一个运
Web前端：HTML篇（一）
最新发布
sjb2274540432的博客
07-22 1074
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
使用html与css,设计如下界面“计算器”网页
10-12
计算器网页设计： 首先，我们需要使用HTML来构建基本的网页结构。可以使用 `<div>` 元素来创建整个网页的容器。 接下来，我们可以在网页上创建一个显示屏区域，用来显示用户的输入和计算结果。可以使用 `<input>` 元素来创建显示屏，设置其 `type` 属性为 `"text"`，并给它一个唯一的 `id`。 然后，我们可以在网页上创建一个按钮区域，用来输入数字和进行计算。可以使用 `<button>` 元素来创建每个按钮，设置其 `value` 属性为对应的数字或操作符，设置其 `onclick` 属性为一个JavaScript函数，在函数中通过操作显示屏区域的值来实现点击按钮时的效果。 另外，我们也可以使用CSS样式来美化网页。可以使用 `margin`、`padding` 和 `border` 属性来调整元素之间的间距和边框样式。可以使用 `background-color` 和 `color` 属性来设置元素的背景色和文字颜色。可以使用 `font-size` 和 `font-family` 属性来调整文字的大小和字体。可以使用 `width` 和 `height` 属性来调整元素的尺寸等。 最后，我们可以在CSS样式中使用 `@media` 查询来实现响应式设计，使得网页可以在不同屏幕尺寸下具有良好的显示效果。 总结起来，使用HTML和CSS来设计计算器网页，需要构建基本的网页结构、创建显示屏区域和按钮区域，设置按钮的点击效果和样式，以及通过CSS样式来美化网页。最终的效果应该是一个包含显示屏和按钮的界面，用户可以通过点击按钮来输入数字和进行计算。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值