前端开发实战：实现一个网页计算机。

最新推荐文章于 2024-07-27 22:56:14 发布
最新推荐文章于 2024-07-27 22:56:14 发布
阅读量1.9k 收藏 8
点赞数 2
分类专栏： Web后台学习笔记 文章标签： web开发小应用 网页计算器 web开发 web计算器 web小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013823101/article/details/100667288
版权

前言
作为一名前端初级开发，我需要一些小项目进行实战训练，才能了解自己是否真正的掌握了前端开发技术。
下面就来实现一个网页计算机的功能。

需求：1）网页界面有0-9十个数字按钮。
2）计算器可以实现加、减、乘、除四种运算。
3）计算机界面显示在网页中间，计算结果显示在上面。
4）计算机需要有复位功能键。

在这里插入图片描述
这里实现了功能界面和主要的实现功能逻辑，主要在功能实现上还有些需要解决，最关键的就是对JavaScript操作Dom文档树的Api不是很了解，导致功能实现上会有卡顿。

1）JavaScript如何更改Dom文档的显示值\和获取显示值？
2）JavaScript如何给标签设置点击事件？

刚开始开发的时候还会遇到一个问题，就是在使用下面代码获取Dom文档的标签的时候，总是获取不到标签。

var actionResult =  document.getElementById("action_result");
console.log(actionResult); //这里打印的是nul.

后来百度到是因为标签的位置有关，因为我们的JavaScript代码是放在header标签的，而网页标签是在body标签的，加载顺序靠后导致没有加载网页标签的情况下加载了js代码，所以获取为null。
解决上面的方法就是把js代码放在body标签之后执行，这样获取到的标签对象就不会是null 。
但是用浏览器进行调试还是报下面的异常，并不影响程序运行。

Unchecked runtime.lastError: The message port closed before a response was received.

写了程序界面布局之后，我们接下来就开始实现功能逻辑代码。

/**思路步骤:
 *1）显示的数字和计算的数字需要分开定义变量，只有计算结果的时候，显示的数字才会等于计算的数值。
 * 2）每个按钮的功能都不一样，表示数值进行的元算的方式也不一样。
 * 3）显示的数字需要定义两个变量定义，一个变量表示数字显示的次数。
 * 4）显示的两次数字最后需要使用计算方法计算得到结果。
 * 5）如果没有复位键，那么计算完成之后，显示结果值之后，需要清空第一次录入和第二次录入的值，重新进行录入可以继续进行运算。
 * 6) 点击功能键说明用户完成了对上一次录入的操作，应该给上一次录入赋值，并开始下一次数值录入。
 * 7）如果用户结束两次录入之后没有计算结果，而是继续按下计算功能键，需要先计算上一次计算结果，然后使用上一次的计算结果开始下一次计算。
 */

之前以为实现这个计算器会比较难，因为需要考虑各种情况。但是每次都是这样，刚开始时觉得很难，但是多花一点时间去想一想，想好动手开始去做，就会发现一切都是想象放大了难度。
万事开头难，开始了就会想办法解决遇到的问题，靠百度就可以解决所有遇到的问题，有了这种心态之后，一切难题也就不是难题了。
这个计算器实现不是很难，但是优化起来就比较复杂。比如我们现在想让输入的数值和运算都显示在界面上，这样用户就可以知道自己输入的是什么，目前正在进行什么运算。

实现思路：
1）输入的所有数值包括等于号都需要显示到界面上。
2）输入的数值需要记录第一次输入的数值，还有第二次的数值。
3）数值首先可以根据每次按下的按钮进行录入，当点击运算符时，就拿到第一次录入的结果和运算符进行拼接。
4）然后用户进行第二次录入时，我们需要使用第一次录入的值和运算符再次拼接第二次录入的结果值。
5）当我们再次点击功能键的时候需要把结果计算出来，这个时候上面的结果和下面的运算结果是一致的。
6）当我们点击等于的时候，需要把等于号添加显示出来，然后后面显示结果。

最后计算器的完整代码如下:

<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8">
		<title>Web计算机</title>
		<style type="text/css">
			.web_counter{
				width: 300px;
				height: 570px;
				background-color: black;
				margin: 0,auto;
			}
		    .show_result{
				width: 300px;
				height: 50px;
				font-size: 30px;
				text-align: left;
				padding-top: 10px;
				position: relative;
				overflow: hidden;
				background: greenyellow;
			}
			table{
				position: relative;
				width: 300px;
				height: 250px;
				margin: 0,auto;
			}
			td{
			   width: 100px;
			   height: 50px;
			   position: relative;
			   background-color: aqua;
			   text-align: center;
			   font-size: 22px;
			}
			td.action_btn{
				width: 120px;
				height: 100px;
				background-color: yellow;
			}
			.action_reset{
				width: 300px;
				height: 50px;
				position: relative;
				text-align: center;
				text-justify: auto;
				text-align: -webkit-center;
				background-color: #FFFF00;
			}
			.active_input{
				width: 300px;
				height: 50px;
			    margin-top: 2px;
				text-align: right;
				font-size: 30px;
				padding-top: 10px;
				overflow: hidden;
				background-color: white;
				
			}
		</style>
		
	</head>
	<body>
		<div class="web_counter">
			<div>
				<div  id="show_result" class ="show_result"></div>
				<div id="active_input" class="active_input"></div>
			</div>
		
			<table>
				<tr>
					<td id="number_seven">7</td>
					<td id="number_eight">8</td>
					<td id="number_nine">9</td>
					<td id="action_add" class="action_btn">+</td>
				</tr>
				<tr>
					<td id="number_four">4</td>
					<td id="number_five">5</td>
					<td id="number_six">6</td>
					<td id="action_cut" class="action_btn">-</td>
				</tr>
				<tr>
					<td id="number_one">1</td>
					<td id="number_two">2</td>
					<td id="number_there">3</td>
					<td id="action_ride" class="action_btn">*</td>
				</tr>
				<tr>
					<td id="number_zear">0</td>
					<td id="number_point">.</td>
					<td id="action_result">=</td>
					<td id="action_divide" class="action_btn">/</td>
				</tr>
			</table>
			<div  id= "active_reset" class="action_reset">AC</div>
		</div>
	</body>
	<script>
		  // 先找到页面的所有标签\
		 var numberOne = document.getElementById("number_one");
		var numberTwo = document.getElementById("number_two");
		var numberThere = document.getElementById("number_there");
		var numberFour = document.getElementById("number_four");
		var numberFive = document.getElementById("number_five");
		var numberSix = document.getElementById("number_six");
		var numberSeven = document.getElementById("number_seven");
		var numberEight = document.getElementById("number_eight");
		var numberNine = document.getElementById("number_nine");
		var numberZear = document.getElementById("number_zear");
		
		var activeAdd = document.getElementById("action_add");
		var activeCut = document.getElementById("action_cut");
		var activeRide = document.getElementById("action_ride");
		var activeDivide = document.getElementById("action_divide");
		
		var activeResult = document.getElementById("action_result");
		var numberPoint = document.getElementById("number_point");
		var showResult =  document.getElementById("show_result");
		var activeReset = document.getElementById("active_reset");
		var activeInput = document.getElementById("active_input");
		/**思路步骤:
		 *1）显示的数字和计算的数字需要分开定义变量，只有计算结果的时候，显示的数字才会等于计算的数值。
		 * 2）每个按钮的功能都不一样，表示数值进行的元算的方式也不一样。
		 * 3）显示的数字需要定义两个变量定义，一个变量表示数字显示的次数。
		 * 4）显示的两次数字最后需要使用计算方法计算得到结果。
		 * 5）如果没有复位键，那么计算完成之后，显示结果值之后，需要清空第一次录入和第二次录入的值，重新进行录入可以继续进行运算。
		 * 6) 点击功能键说明用户完成了对上一次录入的操作，应该给上一次录入赋值，并开始下一次数值录入。
		 * 7）如果用户结束两次录入之后没有计算结果，而是继续按下计算功能键，需要先计算上一次计算结果，然后使用上一次的计算结果开始下一次计算。
		 */
		 var inputResult = "0";
		 var fristInput = 0;
		 var secondInput = 0;
		 var resultValue = 0;
		 var inputValue = "";
		 var saveInputStr = "";
		 //定义四个标识运算按钮被点击了
		 var addBtnClicked = false;
		 var cutBtnClicked = false;
		 var rideBtnCliked = false;
		 var divideBtnClick = false;
		 var finishFristInput = false;
		 var secondInputFinish = false;
		 
		 
		 numberOne.onclick = function(){ //点击数字1,显示数字1
		   if(inputResult == "0"){
			    inputResult = "1";
		   }else{
			    inputResult += "1";
		   }
		   showResult.innerHTML = inputResult;
		   showInputActive();
		 };
		numberTwo.onclick = function(){ //点击数字2,显示数字2
		  if(inputResult == "0"){
			  inputResult = "2";  
		  }else{
			   inputResult += "2";
		  }
		  showResult.innerHTML = inputResult;
		  showInputActive();
		};
		 numberThere.onclick = function(){
	      if(inputResult == "0"){
			inputResult = "3";
	      }else{
			inputResult += "3";
	      }		 		  
		   showResult.innerHTML = inputResult;
		    showInputActive();
		 };
		 numberFour.onclick = function(){ 
		  if(inputResult == "0"){
		      inputResult = "4";
		  }else{
		  	  inputResult += "4";
		  }		 
		  showResult.innerHTML = inputResult;
		   showInputActive();
		 };
		 numberFive.onclick = function(){	
		  if(inputResult == "0"){
		  	  inputResult = "5";
		  }else{
		  	  inputResult += "5";
		  }		 
		  showResult.innerHTML = inputResult;
		   showInputActive();
		 };
		 numberSix.onclick = function(){ 
		 if(inputResult == "0"){
		 	 inputResult = "6";
		 }else{
		 	 inputResult += "6";
		 }		 
		 showResult.innerHTML = inputResult;
		  showInputActive();
		 };
		 numberSeven.onclick = function(){
		 if(inputResult == "0"){
		 	inputResult = "7";
		 }else{
		 	inputResult += "7";
		 }		
		  showResult.innerHTML = inputResult;
		  showInputActive();
		 };
		 numberEight.onclick = function(){		
		 if(inputResult == "0"){
		 	 inputResult = "8";
		 }else{
		 	 inputResult += "8";
		 }		 
		 showResult.innerHTML = inputResult;
		  showInputActive();
		 };
		 numberNine.onclick = function(){ 	 
		  if(inputResult == "0"){
		  	  inputResult = "9";
		  }else{
		  	   inputResult += "9";
		  }		 
		  showResult.innerHTML = inputResult;
		   showInputActive();
		 };
		 numberZear.onclick = function(){
		if(inputResult == "0"){
			inputResult = "0"; 
		}else{
		    inputResult += "0";	 
		}	
		  showResult.innerHTML = inputResult;
		   showInputActive();
		 };
		 numberPoint.onclick = function(){
		  inputResult += ".";
		  showResult.innerHTML = inputResult;
		   showInputActive();
		 };
		 activeAdd.onclick = function(){
			 addBtnClicked = true;
			 mathInputActions();
			  showInputActive();
		 };
		activeCut.onclick = function(){ 
			cutBtnClicked = true;
		    mathInputActions();
			 showInputActive();
		};
		activeRide.onclick = function(){ 
			rideBtnCliked = true;
		   mathInputActions();
			 showInputActive();
		};
		activeDivide.onclick = function(){ 
			divideBtnClick = true;
		    mathInputActions();
			 showInputActive();
		};
		activeResult.onclick = function(){
			  mathInputActions();
			   showInputActive();
		};
		 activeReset.onclick = function(){
			inputResult = "";
			fristInput = 0;
			secondInput = 0;
			inputResult = 0;					
			showResult.innerHTML = "";	
			inputValue = "";
			saveInputStr = "";
			activeInput.innerHTML = "";		
			finalInputStr = "";
			finishFristInput = false;
			secondInputFinish = false;
		 };
		 //写四个方法执行算法运算
		 /**
		  * 加法运算
		  * @param {Object} valueOne
		  * @param {Object} valueTwo
		  */
		 function addInputValue(){
			  addBtnClicked = false;
			return fristInput + secondInput;	
		 }
		 
		function cutInputValue(){
			  cutBtnClicked = false;
			return fristInput - secondInput;	
		}
		function rideInputValue(){
			  rideBtnCliked = false;
			return fristInput * secondInput;	
		}
		function diveInputValue(){
			  divideBtnClick = false;
			return fristInput / secondInput;	
		}
		function mathInputActions(){
			if(fristInput ==0){
				fristInput = parseFloat(inputResult);
				inputResult = "0"; //清空第一次输入数据	
			}else{
				secondInput = parseFloat(inputResult);	//记录第二次输入数据	
				secondInputFinish = true;
			}
			//如果两次输入的数据大于0则进行计算
			if( fristInput >0 && secondInput >0){
				var mathValue = 0;
				if(addBtnClicked){
					  mathValue = addInputValue();
				}else if(cutBtnClicked){
					  mathValue = cutInputValue();
				}else if(rideBtnCliked){
					  mathValue = rideInputValue();
				}else if(divideBtnClick){
					  mathValue =  diveInputValue();
				}
				inputResult = mathValue;
				showResult.innerHTML = inputResult;
			}		
		}
		
		function showInputActive(){
			// alert(fristInput);
			// alert(secondInput);
			// alert(inputResult);
			//如果第一次输入大于0则进行显示运算符号
		  if(fristInput >0 && !finishFristInput){	
				inputValue = fristInput;
				if(addBtnClicked){
					inputValue += "+";
				}else if(cutBtnClicked){
					inputValue += "-";
				}else if(rideBtnCliked){
					inputValue += "*";
				}else if(divideBtnClick){
					inputValue += "/";
				}else if(secondInput >0){
					inputValue += secondInput;
				}
				saveInputStr = inputValue;
				activeInput.innerHTML = inputValue;
				//isDoMath = true;
				finishFristInput = true;
			}else if(secondInput >0 && secondInputFinish){	
				saveInputStr += secondInput;
				saveInputStr += "="+inputResult;
				fristInput = inputResult;
				activeInput.innerHTML = saveInputStr;
				fristInput = parseFloat(inputResult); //计算完成之后清空之前的输入数值
				inputResult = "";
				secondInput =0;
				saveInputStr = "";
				finishFristInput = false;
			}else{
				//alert("显示输入:"+inputResult);
				//这里没有录入第一次输入的时候是直接显示数值
				//录入第一次输入之后就需要组拼第一次输入的字符
				//用户再次点击运算按钮之后,结束第二次录入,这个时候就开始显示计算结果.
				if(inputResult >0 && !finishFristInput){ 
					inputValue = inputResult;
					activeInput.innerHTML = inputValue;
				}else{ //如果结束了第一次录入,开始拼接字符串,然后设置下一次开始计算的条件
					 var secondInputStr = saveInputStr; //每次重新给输入赋新值.
					 secondInputStr += inputResult;
					//这里存在第二次输入没有结束,但是输入的结果却重复添加的问题.					
					activeInput.innerHTML = secondInputStr;
				}
			}
		}
	</script>
</html>
技术承载梦想
关注
专栏目录
前端练习--计算器
end123455的博客
04-06 1247
前端练习–计算器 练习要求： 1.实现页面样式：数字和运算控件，页面居中 2.实现计算功能：能够进行加减乘除运算，也能进行退格和清空功能。 验证计算器，用例：11+22 是否得到 33 的结果 代码实现 css样式 /* 清除页面默认样式 */ *{ margin: 0; padding: 0; } /* 对整个计算器设置定位，居中 */ .con{ position: relative; left: 700px; top: 200
HTML5网页前端设计实战代码,HTML5网页前端设计实战/Web前端开发技术丛书
weixin_29616999的博客
06-07 1921
导语内容提要周文洁编著的《HTML5网页前端设计实战/Web前端开发技术丛书》是《HTML5网页前端设计》一书的配套实战项目教程，也可单独为具有一定Web前端基础的读者使用。本书的电子资源包括全套例题源代码可供读者下载。全书共包含10章，每章均配套两个实例项目。全部内容可分为以下4个部分：第一部分是基础知识篇，包括第1、2章的内容。其中，第1章是HTML+CSS基础项目，介绍导航菜单与商务风格表格...
html静态前端计算器页面
08-17
简单的html与scc代码做个静态的计算器，喜欢的朋友可以参考，背景图片来源网络竟提供参考
写一个网页计算器
Snakehj的博客
06-07 400
写一个网页计算器 它可以进行长算式计算，不能进行混合运算。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <style> table{ height: 350px; width: 500px; ma
JAVAWeb实战（前端篇）
最新发布
weixin_61808639的博客
07-27 641
routes:[path:"/",},},},})// 路由 的全局前置守卫 判断是否可以访问showSchedule// 登陆过放行// 没登录 回到登录页}else{next()}else{next()})数据库schedule表对应的pinia文件这里用集合来接收所有数据/*专门用于存储日程状态信息的pinia*/return {},getters:{},actions:{user表对应的pinia文件/*专门用于存储用户状态信息的pinia。
网页计算机（h5+js+css）
qq_42916958的博客
06-29 783
今天学了一个网页计算机（h5+js+css） 效果图如下： 代码如下： html: <!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,
制作简易计算机页面
linzhengchao的博客
06-23 634
本文主要介绍了一款计算器应用的开发过程与关键测试环节，包括单元测试、界面测试、异常测试以及性能优化等。文章还分析了性能优化与代码重构的建议，如提高代码可读性、减少冗余代码以及利用设计模式优化结构等。文章强调了在开发过程中遵循的命名规范、注释清晰、代码格式化和模块化设计的重要性。此外，文章还展望了未来功能拓展的方向，如图形化界面优化、复杂计算功能、语音输入与输出以及云端存储与同步等，以进一步提升用户体验和应用的实用性。
web前端入门到实战：实现图形验证码
软件开发-前端开发-IT
09-20 4466
什么是图形验证码 图形验证码是验证码的一种。验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力...
web前端入门到实战：网页开发中字体，字号与尺寸对应表
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-01 1928
了解字体的一样常识，不管做一份文档编辑还是网页开发，都是很有必要的。整齐划一，井然有序才终是大家之道。 1.字体 在文档编辑中，我们常用的是宋体，小四号字，新罗马字体，字母和数字用的是Arial字体,段落首行缩进2个字体，采用多倍行距中的1.25倍行距。 在网页开发中，普遍偏爱微软雅黑与宋体，14/16px，非衬线体。 2.字号 印刷文字有大、小的不同变化，排版及图象处理软件中汉字字体大小的计量，...
Web前端开发实战共51页.pdf.zip
12-02
【标题】"Web前端开发实战共51页.pdf"揭示了这是一份关于Web前端开发实践的教程，可能涵盖了从基础到进阶的各种主题。在Web前端开发领域，开发者主要负责构建用户在浏览器中看到和交互的网页部分，包括HTML、CSS、...
计算机院页面设计
10-11
网页设计与艺术，静态网页，写的是一个院的网站，多个页面合成。 网上找的模板改成的。比较系统
计算器（网页版）
12-16
网页版的计算器开发，比较适合初学者，代码比较规范，虽然还有一些缺点，但是给初学者看，是比较好的一个学习过程！
网页版计算器
11-30
使用java模拟栈数据结构，利用栈完成表达式求值，把程序打war包后就可以在浏览器中访问
教育网站前端
08-29
教育网站前端代码，可省去大部分时间，下载修改即可用
网页版计算器.html
10-13
用html写的网页版计算器，自己做的作业，可供初学者参考
项目一 计算器
zhaoYuanJun_nb的博客
11-25 746
计算器项目
前端页面计算器实现
想娶媳妇的苗同学的博客
10-02 3751
简易的前端计算器实现，献给大家！ 1、html部分（js已嵌入）代码： <!-- 前端计算机 爱娶媳妇的苗同学 2019.12.24 22：29 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title...
布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）...
weixin_33814685的博客
07-10 1641
一、静态布局（static layout） 　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点 　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。   2、设计方法...
前端开发精粹：JavaScript基础与实战
2. **事件进阶（Web前端角度）**：在Web前端开发中，事件是指用户与网页交互时发生的动作，如点击按钮、滚动页面等。事件进阶可能包括更复杂的事件处理，如事件委托、事件 bubbling 和 capturing、自定义事件、异步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值