用script实现的一个简易计算机

于 2024-08-03 18:28:24 发布
阅读量138 收藏 3
点赞数 3
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sixudhjj/article/details/140894472
版权

目录

一、计算器原理

二、源码

三、结果展示

四、不足与改进

一、计算器原理

首先我们列出想象中简易计算器的样子：

虽然画的磕碜但是应该不影响下面的操作hh

首先想到用表格形式在网页中表示它，是一个5行4列的表格，接着要实现计算器的功能，每个按钮都需要添加事件--->onclick()当鼠标点击时触发， 所有的数字和运算符都要使用onclick触发，等于号和c(清空键)较为特殊，他们需要对应与数字和普通运算符不同的事件：计算结果和清空输入。以及最上方的显示块需要时刻与输入的内容对应也是不同的事件。

运算的过程较为简单，只使用了eval()函数进行计算。

最后就是对计算器输入过程的修饰，计算过程不能出现数字后跟多个运算符的情况，如5++或5+-*/，这样会导致eval()函数无法正常计算，所以需要对输入时的事件进行休整。

二、源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table {
				border: 10px;
				margin: auto;
			}

			td {
				border: 2px solid black; //单元格边框
				text-align: center;
				/*单元格内容居中*/
				padding: 20px;
				/*内边距*/
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="4" id="result"></td>
			</tr>
			<tr>
				<td onclick="appendresult('7')">7</td>
				<td onclick="appendresult('8')">8</td>
				<td onclick="appendresult('9')">9</td>
				<td onclick="appendresult('+')">+</td>
			</tr>
			<tr>
				<td onclick="appendresult('4')">4</td>
				<td onclick="appendresult('5')">5</td>
				<td onclick="appendresult('6')">6</td>
				<td onclick="appendresult('-')">-</td>
			</tr>
			<tr>
				<td onclick="appendresult('1')">1</td>
				<td onclick="appendresult('2')">2</td>
				<td onclick="appendresult('3')">3</td>
				<td onclick="appendresult('*')">*</td>
			</tr>
			<tr>
				<td onclick="appendresult('0')">0</td>
				<td id="clear" onclick="clearall()">c</td>
				<td onclick="caculate()">=</td>
				<td onclick="appendresult('/')">/</td>
			</tr>
		</table>
	</body>
	<script>
		var inputment = ""; //输入的内容
		function appendresult(value) {
			// 判断value是数字还是符号
			if (value == "+" || value == "-" || value == "*" || value == "/") {
				// 检查最后一个字符是否为运算符
				if (inputment.length > 0 && (inputment[inputment.length - 1] == "+" ||
						inputment[inputment.length - 1] == "-" ||
						inputment[inputment.length - 1] == "*" ||
						inputment[inputment.length - 1] == "/")) {
					return; // 如果是运算符，则不添加新的运算符，return不进行任何操作
				}
				inputment += value; // 添加新的运算符
			} else {
				// 如果是数字，直接添加
				inputment += value;
			}

			update();
		}

		function caculate() {
			var result = eval(inputment);
			inputment = result.toString(); //更新全局变量
			update();
		}

		function update() {
			document.getElementById("result").innerText = inputment || "0";
		}

		function clearall() {
			document.getElementById("result").innerText = "";
			inputment = "";
		}
	</script>
</html>

三、结果展示

 

可以看到不会出现多个运算符重复出现的错误。

四、不足与改进

在制作此计算器时，用的是表格来表示计算器，没有考虑到点击形式的问题，使得在使用时鼠标全程是I的状态，不是点击状态，用起来十分别扭，除了将整个表格变成<input>中的按钮状态外，有更便捷的方法来解决：

可以在td的类选择器中添加

cursor: pointer; /* 鼠标悬停时显示手型光标 */

为了使用时更加便捷，还可以使用伪类添加鼠标悬停时的背景色以及点击时的背景色：

td:hover { background-color: #f0f0f0; /* 鼠标悬停时的背景色 */ }

td:active { background-color: #d0d0d0; /* 点击时的背景色 */ } 

 最后的效果：

此时的鼠标放在了数字7上，并且是点击态，再点击后颜色会加深一点。

改进后的代码：

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table {
				border: 10px;
				margin: auto;
			}

			td {
				border: 2px solid black; //单元格边框
				text-align: center;
				/*单元格内容居中*/
				padding: 20px;
				/*内边距*/
				cursor: pointer;
				/* 鼠标悬停时显示手型光标 */
			}

			td:hover {
				background-color: #f0f0f0;
				/* 鼠标悬停时的背景色 */
			}

			td:active {
				background-color: #d0d0d0;
				/* 点击时的背景色 */
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="4" id="result"></td>
			</tr>
			<tr>
				<td onclick="appendresult('7')">7</td>
				<td onclick="appendresult('8')">8</td>
				<td onclick="appendresult('9')">9</td>
				<td onclick="appendresult('+')">+</td>
			</tr>
			<tr>
				<td onclick="appendresult('4')">4</td>
				<td onclick="appendresult('5')">5</td>
				<td onclick="appendresult('6')">6</td>
				<td onclick="appendresult('-')">-</td>
			</tr>
			<tr>
				<td onclick="appendresult('1')">1</td>
				<td onclick="appendresult('2')">2</td>
				<td onclick="appendresult('3')">3</td>
				<td onclick="appendresult('*')">*</td>
			</tr>
			<tr>
				<td onclick="appendresult('0')">0</td>
				<td id="clear" onclick="clearall()">c</td>
				<td onclick="caculate()">=</td>
				<td onclick="appendresult('/')">/</td>
			</tr>
		</table>
	</body>
	<script>
		var inputment = ""; //输入的内容
		function appendresult(value) {
			// 判断value是数字还是符号
			if (value == "+" || value == "-" || value == "*" || value == "/") {
				// 检查最后一个字符是否为运算符
				if (inputment.length > 0 && (inputment[inputment.length - 1] == "+" ||
						inputment[inputment.length - 1] == "-" ||
						inputment[inputment.length - 1] == "*" ||
						inputment[inputment.length - 1] == "/")) {
					return; // 如果是运算符，则不添加新的运算符，return不进行任何操作
				}
				inputment += value; // 添加新的运算符
			} else {
				// 如果是数字，直接添加
				inputment += value;
			}

			update();
		}

		function caculate() {
			var result = eval(inputment);
			inputment = result.toString(); //更新全局变量
			update();
		}

		function update() {
			document.getElementById("result").innerText = inputment || "0";
		}

		function clearall() {
			document.getElementById("result").innerText = "";
			inputment = "";
		}
	</script>
</html>
非凡王衍钦
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用JavaScript实现一个简易计算器功能
weixin_45539338的博客
06-11 1776
JavaScript实现简易计算器功能
sikuli-ui自动化简易工具
02-03
- **简单易用的脚本语言**：Sikuli 使用 Python 的一种方言，称为 Sikuli Script，语法简洁，易于学习。 - **集成开发环境（IDE）**：Sikuli 提供了一个集成的开发和调试环境，可以方便地编写、测试和执行脚本。 - *...
js之实现一个简易的计算器
热门推荐
qq_58277732的博客
11-23 1万+
通过js实现一个简易的计算器。代码如下： <!DOCTYPE html> <html> <head> <title> 事件</title> <script type="text/javascript"> function count(){ var first= document.getElementById("txt1").value; var second=document.g
简易计算机：（JavaScript实现）
weixin_44764592的博客
10-13 1975
简易计算机： 函数的封装： List item 在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。 函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。 首先：初始化变量，设置欢迎弹窗，命名为welcome()；并设置操作选项提示。 var w, shu1, shu2; // var shu1;
JavaScript 用三种方法做一个简易计算器
m0_62496369的博客
10-21 7509
new关键字执行过程 // 1.new构造函可以在内存中创建了一个空的对象 // 2.this就会指向刚才创建的空对象 // 3.执行构造函数里面的代码 给这个空对象添加属性和方法 // 4.返回这个新对象(所以构造函数里面不需要return)
做一个简易计算器
永无餍足的博客
04-14 3751
在学习js之后，结合html, css, js做出一个简易计算器
js实现一个简易计算器
Rockandrollman的博客
01-05 2983
使用js实现一个简易计算器，可以进行简单的加减乘除。
简易计算机实现
weixin_57064740的博客
11-28 196
效果图展示 代码展示 <!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"> &lt
如何用C++实现一个简易数据库（三）
weixin_44214242的博客
03-16 2590
如何用C++实现一个简易数据库（三） 1. 怎么初步完成我们的数据库？ 现在我们先从最简单的开始，我们即将完成的数据库功能非常简单。 仅支持insert和select两项 将一切数据储存到内存中，即退出程序后一切数据丢失。 仅支持单个硬编码表 2. 如何修改我们的测试用例？ 为了支持上述情况，我们需要修改我们的insert和select测试用例如下。 it 'inserts and retrieves a row' do result = run_script([ "insert 1
用SpringMvc做一个简易计算器
I_still_like_you的博客
10-27 1766
用SpringMvc做一个简易计算器 一 .domain类 package ssm1.domain; public class JiSuan { private int numOne; private int numTwo; private String yunSuan; private int result; public int getNumOne() { return numOne; } public void setNu
javascript实现简易计算器
12-11
在本文中，我们将探讨如何使用JavaScript实现一个简易的加减乘除计算器。这个计算器是基于HTML和CSS构建的用户界面，结合JavaScript进行动态计算。首先，我们来看一下HTML部分，它包括两个输入框（`...
C++程序中导出Word文档的简易方法
07-26
### C++程序中导出Word文档的简易方法 在日常工作中，经常...当然，这只是一个基本的示例，实际应用中可能还需要根据具体需求进行更多的定制化开发。希望本文能为您在实际工作中遇到的相关问题提供一些参考和帮助。
php与mysql写的简易博客 ~初学者必看！
08-01
对于初学者来说，这是一个很好的实践项目，可以帮助他们掌握这两种技术的基础知识和实际应用。 【描述】：“php与mysql写的简易博客 ~初学者必看！请在wamp的www目录下打开~” 描述中提到的“wamp”是指Windows下的...
MyMacRemoteControl:通过python arduino和applescript进行OS X远程控制的简单应用程序
05-15
今天我们将探讨一个名为"MyMacRemoteControl"的项目，它巧妙地结合了Python、Arduino和AppleScript，实现了一种对OS X系统的简易远程控制方案。这个项目不仅展示了跨平台技术和编程语言的协同工作，还揭示了如何利用...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 890
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 219
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 280
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【Vue3】自定义组件
最新发布
又言又语
07-30 437
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
怎么用html写一个简易的计算机
05-10
可以使用HTML和JavaScript来编写一个简易的计算器。 首先，我们需要创建一个HTML页面，包含两个输入框和一些按钮，如下所示： ```html <!DOCTYPE html> <html> <head> <title>简易计算器</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <input type="text" id="num1"> <input type="text" id="num2"> <br> <button onclick="add()">加</button> <button onclick="sub()">减</button> <button onclick="mul()">乘</button> <button onclick="div()">除</button> <br> <p id="result"></p> <script src="calculator.js"></script> </body> </html> ``` 然后，我们需要编写一个JavaScript文件，来实现计算器的功能。以下是一个简单的实现： ```javascript function add() { var num1 = Number(document.getElementById("num1").value); var num2 = Number(document.getElementById("num2").value); var result = num1 + num2; document.getElementById("result").innerHTML = result; } function sub() { var num1 = Number(document.getElementById("num1").value); var num2 = Number(document.getElementById("num2").value); var result = num1 - num2; document.getElementById("result").innerHTML = result; } function mul() { var num1 = Number(document.getElementById("num1").value); var num2 = Number(document.getElementById("num2").value); var result = num1 * num2; document.getElementById("result").innerHTML = result; } function div() { var num1 = Number(document.getElementById("num1").value); var num2 = Number(document.getElementById("num2").value); var result = num1 / num2; document.getElementById("result").innerHTML = result; } ``` 以上代码中，我们定义了四个函数，分别实现加、减、乘、除四种运算。每个函数首先获取输入框中的数字，然后执行对应的运算，并将结果显示在页面上。 最后，我们需要将以上两个文件放在同一个目录下，并将HTML文件中的`<script>`标签中的`src`属性指向JavaScript文件的路径。 完成以上步骤后，我们就可以在浏览器中打开HTML文件，使用简易计算器了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值